У меня есть список событий, эти события каждый из определенного типа, и начать в определенном месяце. У меня есть флажок группы для типов и один в течение нескольких месяцев. То, что я пытаюсь сделать, это использовать флажки для фильтрации списка. У меня она работает с одной группой, но не могу показаться, чтобы получить его работу с ними.
В основном я пытаюсь установить класс, когда я скрыть элемент списка, так что я знаю, какая группа спряталась, но это, кажется, запутаться. Имена классов являются правильными, но некоторые иногда элементы не получают показаны снова.
Если кто-то может увидеть то, что я делаю неправильно, или думать о лучшем решении, которое было бы здорово! Благодаря!
Даррен.
Мой 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>
