JQuery несколько фильтров флажков

Question

У меня есть список событий, каждое из которых относится к определенному типу и начинается в определенный месяц. У меня есть группа флажков для типов и один на месяцы. То, что я пытаюсь сделать, это использовать флажки для фильтрации списка. Я работаю с одной группой, но не могу заставить работать с двумя.

Обычно я пытаюсь установить класс, когда скрываю элемент списка, так что я знаю, какая группа его скрыла, но, похоже, она запуталась. Имена классов правильные, но некоторые элементы иногда не отображаются снова.

Если кто-нибудь может увидеть, что я делаю неправильно, или придумать лучшее решение, которое было бы замечательно! Спасибо!

Даррен.

Мой 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;
});

Мой 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>

Answer 1

Атрибуты идентификатора в ваших LI недействительны - они не могут быть просто числами. Javascript, вероятно, захлебнется при попытке назначить их.

См. Стандарт: http://www.w3.org/TR/REC-html40/types.html#type-name

ID и ИМЯ токены должны начинаться с буква ([A-Za-z]) и может сопровождаться по любому количеству букв, цифр ([0-9]), дефисы ("-"), подчеркивание ("_"), двоеточия (":") и точки ( "").

Answer 2

ОК, вот исправление. Изменения:

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

до:

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

в обоих местах.

Answer 3

Изменить эту строку:

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

К этому:

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

Сделайте аналогичное изменение в вашем селекторе start_check. Это перехватывает событие click вместо события change на ваших флажках. Это событие будет запускаться независимо от того, используется ли мышь или клавиатура для изменения флажка.

Я протестировал его на своем компьютере, используя IE7 и Firefox.