jQuery mehrere Kontrollkästchen Filter

stimmen
1

Ich habe eine Liste von Veranstaltungen, sind diese Ereignisse jeweils eines bestimmten Typs, und in einem bestimmten Monat beginnen. Ich habe eine Checkbox Gruppe für Typen und eine für Monate. Was ich versuche die Kontrollkästchen zu tun ist, zu verwenden, um die Liste zu filtern. Ich habe es mit einer Gruppe zu arbeiten, aber kann nicht scheinen, um es zu bekommen mit zwei arbeiten.

Grundsätzlich Ich versuche, eine Klasse zu setzen, wenn ich den Listeneintrag verstecken, damit ich weiß, welche Gruppe es versteckt, aber es scheint verwirrt. Die Klassennamen sind korrekt, aber einige manchmal Gegenstände nicht wieder gezeigt bekommen.

Wenn jemand kann sehen, was mache ich falsch, oder denken Sie an eine bessere Lösung, das wäre toll! 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>
Veröffentlicht am 14/07/2009 um 15:27
quelle vom benutzer
In anderen Sprachen...                            


3 antworten

stimmen
4

Die ID-Attribute auf Ihrem LIs ungültig ist - sie können nicht nur Zahlen. Javascript wird wahrscheinlich ersticken, wenn sie versuchen Zuweisungen auf sie zu machen.

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

ID und Name - Token mit einem Buchstaben beginnen müssen ([A-Za-z]) und kann durch eine beliebige Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen gefolgt werden ( "-"), Unterstreichungen ( "_") , Doppelpunkte ( ":") und Punkte ( "").

Beantwortet am 14/07/2009 um 17:48
quelle vom benutzer

stimmen
0

Ändern Sie diese Zeile:

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

Um dies zu:

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

Machen Sie eine ähnliche Änderung Ihrer start_check Wähler. Diese hakt die clickVeranstaltung statt , die changeVeranstaltung auf dem Kontrollkästchen. Dieses Ereignis wird ausgelöst , ob die Maus oder die Tastatur verwendet wird , um das Kontrollkästchen zu ändern.

Getestet habe ich es auf meinem Computer mit IE7 und Firefox.

Beantwortet am 14/07/2009 um 18:23
quelle vom benutzer

stimmen
0

OK, hier ist die Lösung. Veränderung:

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.

Beantwortet am 14/07/2009 um 21:59
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more