Javascript jQuery多个复选框过滤器

我有一个事件列表，这些事件都是特定类型的，并且在特定的月份开始。我有一个类型复选框组和一个月复选框组。我想做的是使用复选框过滤列表。我和一组人一起工作，但似乎不能和两组人一起工作

基本上，当我隐藏列表项时，我试图设置一个类，这样我就知道是哪个组隐藏了它，但它看起来很混乱。类名是正确的，但有时某些项不会再次显示

如果有人能看到我做错了什么，或者想出更好的解决方案，那就太好了！谢谢

达伦

我的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>

类型：

类型0
类型1
类型2
类型3
类型4
开始：

2009年7月
2009年8月
2009年9月
2009年10月
事件


事件1
事件2
事件3
事件4
事件5
事件6
事件7
事件8
事件9
事件10

LIs上的ID属性无效-它们不能只是数字。Javascript在尝试对其进行赋值时可能会阻塞

见标准：

ID和NAME标记必须以 字母（[A-Za-z]），并可遵循 通过任意数量的字母、数字 （[0-9]），连字符（“-”），下划线 （“）、冒号（“：”）和句点 （“）

---

LIs上的ID属性无效-它们不能只是数字。Javascript在尝试对其进行赋值时可能会阻塞

见标准：

ID和NAME标记必须以 字母（[A-Za-z]），并可遵循 通过任意数量的字母、数字 （[0-9]），连字符（“-”），下划线 （“）、冒号（“：”）和句点 （“）

更改此行：

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

为此：

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

对开始检查选择器进行类似的更改。这将钩住

单击

事件，而不是复选框上的

更改

事件。无论是使用鼠标还是键盘更改复选框，此事件都将触发

我用IE7和Firefox在我的电脑上测试了它。

更改这一行：

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

为此：

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

对开始检查选择器进行类似的更改。这将钩住

单击

事件，而不是复选框上的

更改

事件。无论是使用鼠标还是键盘更改复选框，此事件都将触发

---

我用IE7和Firefox在我的电脑上测试了它。

好的，这是修复方法。更改：

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

致：

---

在这两个地方。

好的，这是修复方法。更改：

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

致：

---

在这两个地方。

您的CSS看起来像什么？没有CSS，请参见下面的示例。您的CSS看起来像什么？没有CSS，请参见下面的示例。这仍然无法解决问题。我在这里举了一个例子：为了打破它，除了室内攀岩，取消所有的勾选，然后取消所有月份的勾选。当你重新计算月份时，事件不会回来。奇怪的如果我解开室内攀岩的扣子，再打勾，它们都会回来。这可能是个线索……是的，很奇怪。我可以勾选和取消勾选Jul-Sept，它们不会回来，但是Oct会回来。我认为最好的办法是在Firebug中加载这个东西，看看函数对元素类做了什么。我不能仅仅通过查看代码来解决这个问题。由于某种原因，当你取消勾选“7月-9月”时，“开始隐藏”类被删除，但显示没有被设置回块。这仍然不能解决它。我在这里举了一个例子：为了打破它，除了室内攀岩，取消所有的勾选，然后取消所有月份的勾选。当你重新计算月份时，事件不会回来。奇怪的如果我解开室内攀岩的扣子，再打勾，它们都会回来。这可能是个线索……是的，很奇怪。我可以勾选和取消勾选Jul-Sept，它们不会回来，但是Oct会回来。我认为最好的办法是在Firebug中加载这个东西，看看函数对元素类做了什么。我不能仅仅通过查看代码就完全搞定它。由于某种原因，当你取消勾选7月-9月时，“开始隐藏”类被删除，但显示没有被设置回块。太棒了！我知道我们最终会到达那里的谢谢！明亮的我知道我们最终会到达那里的谢谢！