Mam listę zdarzeń, wydarzenia te są każdego określonego typu i rozpoczęcia w określonym miesiącu. Mam grupę pole wyboru typów i jeden dla miesięcy. Co staram się zrobić to użyć pól wyboru, aby przefiltrować listę. Mam go pracy z jednej grupy, ale nie wydaje się uzyskać go pracy z nimi.
Zasadniczo próbuję ustawić klasę kiedy ukryć element listy, więc wiem, do której grupy ukrył go, ale wydaje się mylić. Nazwy klas są poprawne, ale czasami niektóre elementy nie pojawiały ponownie.
Jeśli ktoś może zobaczyć, co robię źle, lub wymyślić lepszego rozwiązania, które byłoby świetnie! Dzięki!
Darren.
Moje 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;
});
Mój 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>
