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上的ID属性无效 - 它们不能只是数字。在尝试对其进行分配时，Javascript可能会窒息。

请参阅标准：http://www.w3.org/TR/REC-html40/types.html#type-name

ID 和 NAME 令牌必须以a开头信（[A-Za-z]），可以遵循任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句号（ “”）。

Answer 2

更改此行：

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

对此：

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

对start_check选择器进行类似的更改。这会勾选click事件，而不是复选框上的change事件。无论使用鼠标还是键盘来改变复选框，都会触发此事件。

我使用IE7和Firefox在我的计算机上测试过它。

Answer 3

好的，这是修复。变化：

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

为：

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

在这两个地方。

jQuery多个复选框过滤器

3 个答案: