filtre multiple checkbox jQuery

voturi
1

Am o listă de evenimente, aceste evenimente sunt fiecare de un anumit tip, și începe într-o anumită lună. Am un grup casetă de selectare pentru tipurile și una de luni de zile. Ceea ce am încercat să fac este să utilizați casetele de selectare pentru a filtra lista. Am luat-o de lucru cu un grup, dar nu pot par să-l lucreze cu două.

Practic am încercat să stabilească o clasă atunci când am ascunde elementul listă, așa că știu ce grup ascuns, dar se pare că pentru a obține confuz. Numele de clasă sunt corecte, dar unele elemente, uneori, să nu fie afișate din nou.

Dacă cineva poate vedea ce fac greșit, sau cred că o soluție mai bună ar fi grozav! Mulțumiri!

Darren.

JavaScript meu:

$(#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;
});

HTML meu:

<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>
Întrebat 14/07/2009 la 15:27
sursa de către utilizator
În alte limbi...                            


3 răspunsuri

voturi
4

ID-ul de atribute pe lis dvs. sunt nevalide - ele nu pot fi doar numere. JavaScript va sufoca, probabil, atunci când încearcă să facă misiuni pe ele.

A se vedea standardul: http://www.w3.org/TR/REC-html40/types.html#type-name

ID și NAME jetoane trebuie să înceapă cu o literă ([A-Za-z]) și poate fi urmată de orice număr de litere, cifre ([0-9]), cratime ( "-"), underscore ( "_") , colons ( ":") și perioadele ( "").

Publicat 14/07/2009 la 17:48
sursa de către utilizator

voturi
0

Schimbați această linie:

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

La acest:

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

Faceți o schimbare similară cu selectorul dvs. start_check. Aceasta agață clickevenimentul în locul changeevenimentului pe casetele de selectare dumneavoastră. Acest eveniment va declanșa dacă mouse - ul sau tastatura este utilizată pentru a modifica caseta de selectare.

L-am testat pe computerul meu folosind IE7 și Firefox.

Publicat 14/07/2009 la 18:23
sursa de către utilizator

voturi
0

OK, aici e fix. Schimbare:

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

la:

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

în ambele locuri.

Publicat 14/07/2009 la 21:59
sursa de către utilizator

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