2009-07-14 18 views
1

Ich habe eine Liste von Ereignissen, diese Ereignisse sind jeweils von einem bestimmten Typ und beginnen in einem bestimmten Monat. Ich habe eine Checkbox-Gruppe für Typen und eine für Monate. Was ich versuche, ist, die Checkboxen zu benutzen, um die Liste zu filtern. Ich habe es funktioniert mit einer Gruppe, aber kann nicht scheinen, dass es mit zwei funktioniert.jQuery mehrere Kontrollkästchen Filter

Grundsätzlich versuche ich eine Klasse zu setzen, wenn ich das Listenelement verstecke, also weiß ich, welche Gruppe es versteckt hat, aber es scheint verwirrt zu werden. Die Klassennamen sind korrekt, aber manchmal werden Elemente manchmal nicht mehr angezeigt.

Wenn jemand sehen kann, was ich falsch mache, oder denke an eine bessere Lösung, die großartig wäre! Vielen Dank!

Darren.

Mein JavaScript:

$("#options input.type_check").change(function() { 
    if($(this).is(':checked')) { 
     $("#events li."+$(this).attr('id')).removeClass('type_hidden'); 
     if(!$("#events li."+$(this).attr('id')).hasClass('start_hidden')) { 
      $("#events li."+$(this).attr('id')).slideDown(); 
     } 
    } else { 
     $("#events li."+$(this).attr('id')).addClass('type_hidden'); 
     $("#events li."+$(this).attr('id')).slideUp(); 
    } 
    return false; 
}); 

$("#options input.start_check").change(function() { 
    if($(this).is(':checked')) { 
     $("#events li."+$(this).attr('id')).removeClass('start_hidden'); 
     if(!$("#events li."+$(this).attr('id')).hasClass('type_hidden')) { 
      $("#events li."+$(this).attr('id')).slideDown();  
     } 
    } else { 
     $("#events li."+$(this).attr('id')).addClass('start_hidden'); 
     $("#events li."+$(this).attr('id')).slideUp(); 
    } 
    return false; 
}); 

Mein HTML:

<p>Types:</p> 
<div><input name="type[]" type="checkbox" id="type_0" value="0" class="type_check" checked="checked" /><label for="type_0">Type 0</label></div> 
<div><input name="type[]" type="checkbox" id="type_1" value="1" class="type_check" checked="checked" /><label for="type_1">Type 1</label></div> 
<div><input name="type[]" type="checkbox" id="type_2" value="2" class="type_check" checked="checked" /><label for="type_2">Type 2</label></div> 
<div><input name="type[]" type="checkbox" id="type_3" value="3" class="type_check" checked="checked" /><label for="type_3">Type 3</label></div> 
<div><input name="type[]" type="checkbox" id="type_4" value="4" class="type_check" checked="checked" /><label for="type_4">Type 4</label></div> 

<p>Starts:</p> 
<div><input name="start[]" type="checkbox" id="start_072009" value="072009" class="start_check" checked="checked" /><label for="type_072009">July 2009</label></div> 
<div><input name="start[]" type="checkbox" id="start_082009" value="082009" class="start_check" checked="checked" /><label for="type_082009">August 2009</label></div> 
<div><input name="start[]" type="checkbox" id="start_092009" value="092009" class="start_check" checked="checked" /><label for="type_092009">September 2009</label></div> 
<div><input name="start[]" type="checkbox" id="start_102009" value="102009" class="start_check" checked="checked" /><label for="type_102009">October 2009</label></div> 

<p>Events</p> 
<ul id="events"> 
    <li id="1768" class="type_0 start_072009">Event 1</li> 
    <li id="2190" class="type_1 start_072009">Event 2</li> 
    <li id="2191" class="type_2 start_072009">Event 3</li> 
    <li id="1864" class="type_2 start_082009">Event 4</li> 
    <li id="1679" class="type_3 start_082009">Event 5</li> 
    <li id="2042" class="type_0 start_092009">Event 6</li> 
    <li id="1717" class="type_4 start_092009">Event 7</li> 
    <li id="1917" class="type_4 start_092009">Event 8</li> 
    <li id="1767" class="type_4 start_092009">Event 9</li> 
    <li id="1866" class="type_2 start_102009">Event 10</li> 
</ul> 
+1

Wie sieht Ihr CSS aus? –

+0

Es gibt kein CSS, siehe Beispiel unten. – iamdarrenhall

Antwort

4

Die ID-Attribute auf Ihrem LIs ungültig ist - sie sind nicht nur Zahlen sein können. Javascript wird vermutlich ersticken, wenn man versucht, Zuordnungen auf ihnen zu machen.

Siehe Standard: http://www.w3.org/TR/REC-html40/types.html#type-name

ID und Name Tokens mit einem Buchstaben ([A-Za-z]) beginnen und kann durch eine beliebige Anzahl von Buchstaben folgen, Ziffern ([0-9]), Bindestriche ("-"), Unterstriche ("_"), Doppelpunkte (":") und Punkte (".").

+0

Prost, IDs geändert! – iamdarrenhall

0

Ändern Sie diese Zeile:

$("#options input.type_check").change(function() { 

Um dies:

$("#options input.type_check").click(function() { 

Machen Sie eine ähnliche Änderung Ihrer start_check Wähler. Dies hakt das Ereignis click anstelle des Ereignisses change in Ihre Kontrollkästchen ein. Dieses Ereignis wird ausgelöst, wenn die Maus oder die Tastatur zum Ändern des Kontrollkästchens verwendet wird.

Ich habe es auf meinem Computer mit IE7 und Firefox getestet.

+0

Das repariert es immer noch nicht. Ich habe hier mein Beispiel: http://dev.darrenhall.info/temp/stackoverflow/jqueryfilter/ Um es zu brechen, deaktivieren Sie alles außer Hallenklettern, dann deaktivieren Sie alle Monate. Wenn Sie die Monate erneut ankreuzen, kommen die Ereignisse nicht zurück. Seltsam?! – iamdarrenhall

+0

Sie kommen alle zurück, wenn ich das Indoor-Klettern abziehe und noch einmal ticke. Das könnte ein Hinweis sein ... –

+0

Ja, es ist seltsam. Ich kann Jul-Sept ankreuzen und nicht ankreuzen und sie kommen nicht zurück, aber Oct kommt zurück. – iamdarrenhall

0

OK, hier ist der Fix. Wechsel:

if(!$("#events li."+$(this).attr('id')).hasClass('start_hidden')) { 
    $("#events li."+$(this).attr('id')).slideDown(); 
} 

zu:

$("#events li).not(".type_hidden, .start_hidden").slideDown(); 

in beiden Orten.

+0

Brilliant! Ich wusste, dass wir am Ende ankommen würden Danke! – iamdarrenhall

Verwandte Themen