Show-hide based on two sets of selectors--how to make them work together?


Tags: jquery,filter,css-selectors,show-hide

Problem :

This calendar has filters for type of event (using checkboxes) and region (links with hot images). I can get either set of filters to work independently but how in the heck do I get them to work together? Would it be better to use radio buttons instead of images or is there some way to "remember" what image was last selected?

This jQuery code worked to select the regions. I used something similar to select the event types. I just can't get them bundled into one jQuery that works together to show selected event types in the selected region!

jQuery for selecting one region

$(document).ready(function() {
    // showall the events
    $("#calendar p").show();

    $("td.filters a").click(function(evt) {
        evt.preventDefault();
        var regionid = $(this).attr('id');
        $("#calendar p").hide(); //hide all

    $("." + regionid).show(); //show only selected region
    });
;

The user may choose several checkboxes but only one region (red, blue, all) at a time, so we're looking at thisregion AND (thistype OR thattype). If the user changes the region, only the selected event types should show. If the user changes the selected event types, the previously selected region should still show. The jQuery below doesn't work.

With this part of the jQuery:

selector += "#" + regionid + "." + "check_" + $(this).attr("id") + ", "; 
// builds a selector like "red.type1, red.type2, blue.type3, "

I am trying to build a selector that ends up with (red AND type1) for the first paragraph, (red AND type2) for the second, and (blue AND type3) for the third. I am not sure how to do that!

HTML

<div class="filters">
    <input type="checkbox" name="check_events" id="typeAny" /> 
    <input type="checkbox" name="check_events" id="type1" /> 
    <input type="checkbox" name="check_events" id="type2" />
    <input type="checkbox" name="check_events" id="type3" />
    <ul>
        <li><a href="javascript:void(0)" id="all">All</a></li>
        <li><a href="javascript:void(0)" id="red">Red</a></li>
        <li><a href="javascript:void(0)" id="blue">Blue</a></li>
    </ul>
</div> 
<table id="calendar">
    <tr>   
        <td><p class="all red typeAny type1">Type 1 event in red region</p></td>
        <td><<p class="all red typeAny type2">Type 2 event in red region</p></td>
        <td><<p class="all blue typeAny type3">Type 3 event in blue region</p></td>
    </tr>
</table>

CSS

.all a, #all a{display:block; background:gray;color:black; }
.red a, #red a{display:block; background:red;color:black; }
.blue a, #blue a{display:block; background:blue;color:black; }

jQuery

$(document).ready(function() {
    var $checkboxes = $("input[id^='check_']");
    $("#calendar p").show();
    $("td.filters a").click(function(evt) {
        evt.preventDefault();
        var regionid = $(this).attr("id");
        var selector = "";
        $checkboxes.filter(':checked').each(function(){ // checked         
            selector += "#" + regionid + "." + "check_" + $(this).attr("id") + ", "; 
            // builds a selector like "red.type1, red.type2, blue.type3, "     
        });    
        selector = selector.substring(0, selector.length - 2); // remove trailing ', '    
        $("#calendar p").hide() // hide all events       
            .filter(selector).show(); // reduce set to matched and show  
    }).change(); 
}); 


Solution :

This is not code, but some kind of nonsense:

  • eventSelected - where it come from? Do you meant selector = selector.substring(0, selector.length - 2);?
  • $("td.filters a") - I don't see any tables or tr's or td's in your code
  • Empty href attribure for links? Are you kidding me? Use 'javascript:void(0)' or 'javascript:;' or '#'!
  • $(".calendar p").show(); - what that means? I don't see any paragraphs in div.calendar.
  • selector += "#" + regionid + "." + "check_" + $(this).attr("id") + ", "; i don't see any possibility when this selector may really select something. Maybe it's better to use show() function for each event in each cycle instead of constructing some monster selector?

There is no possibility to help you with the given code. Try to rewrite it properly and I'll try to help. Currently its impossible.


    CSS Howto..

    How to write function in css

    How to Change Error Message Css Style (Parsley)

    How to make an image 'pop out' when page is loaded (using jQuery or possibly CSS transitions)

    How to maneuver between two divs using CSS?

    How to achieve multiple icon hover transitions over one image

    How to center dropdown menu under parent tab?

    Css - how hide third element td?

    How can I track down a:hover jquery source?

    How to add CSS if element has more than one child?

    How to set up navigation with fading (sprite) background image

    How to make 2 level scrolling tab in CSS like this in HTML 5

    How to style the arrow that opens submenus in jQuery mmenu?

    How to have separate images for radio buttons - HTML & CSS

    How to override a display:none property applied to parent element in specific child elements

    How to play a second CSS animation once the first one finishes

    How Float divs like twitter?

    How can I create an overlay that stays in DOM as opacity 0 but doesn't prevent content from being clickable?

    How to make round circle links responsive in css?

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    Added ellipsis for long text but it showing below the text

    How to force space inbetween a css table (responsive webpage)

    PrimeFaces: how to override CSS class

    How to apply CSS style for the current page link

    How to structure a Grunt task for develop and release

    How to create different and unique ID for some class in css?

    How to know the correct css selector or group of selector for any html element quickly?

    How to slide a div from bottom using pure css or pure javascript

    How to have multiple css print layouts on a single page application?

    How to Automatically Close Alerts using Twitter Bootstrap

    views_slideshow controls modification Drupal 7