Javascript 使用JQuery复选框筛选项目列表

我有一套两个不同的复选框；价格，种类

最初，我希望显示整个结果列表，但当应用过滤器时，列表会更改，然后当过滤器被删除或全部删除时，列表会调整

我使用JQuery来过滤结果，但我似乎无法获得结果，因此当没有勾选复选框时，所有产品都会显示，例如，如果没有勾选价格选项，但类别中的仪器是，则所有仪器都会显示。它们由标记中的class标记标识，在我的代码中，class标记是从JSON文件设置的，但是在JSFiddle中，我刚刚放置了一些示例测试数据

我已经创建了一个JSFIDLE，但它似乎没有运行，但在我的笔记本电脑上运行的代码完全相同

这是我的密码：

$document.readyfunction{ $price:checkbox.clickfunction{ $li.hide； $price:checkbox:checked.eachfunction{ $.+$this.val.show； }; }; $category:checkbox.clickfunction{ $li.hide； $category:checkbox:checked.eachfunction{ $.+$this.val.show； }; }; };

价格

£0 - £5 £5 - £10 £10 - £50 £50 - £100 £100 - £500 £500 - £1000 £1000 +

类别

仪器 乐谱 配件 自助餐B12单簧管400英镑 雅马哈单簧管1700英镑 特雷弗·詹姆斯中音萨克斯管700英镑 奥罗斯录音机16英镑

---

在每个循环之前，如果值为0，则显示所有列表项并检查选中了多少复选框。在每个循环之前，如果值为0，则显示所有列表项并检查选中了多少复选框。如果值为0，则使用数据属性而不是类。这意味着您可以将复选框单击分组为一个函数。见下文：

$document.readyfunction{ $“过滤器：复选框”。单击函数{ 如果$'input:复选框：选中'.length'{ $‘li’。隐藏； $“输入：复选框：选中”。每个函数{ $'li[data-'+$this.prop'name'+'*='+$this.val+'].show； }; }否则{ $li.show； } }; };

价格

£0 - £5 £5 - £10 £10 - £50 £50 - £100 £100 - £500 £500 - £1000 £1000 +

类别

仪器 乐谱 配件 自助餐B12单簧管400英镑 雅马哈单簧管1700英镑 特雷弗·詹姆斯中音萨克斯管700英镑 奥罗斯录音机16英镑

---

我将使用数据属性而不是类。这意味着您可以将复选框单击分组为一个函数。见下文：

$document.readyfunction{ $“过滤器：复选框”。单击函数{ 如果$'input:复选框：选中'.length'{ $‘li’。隐藏； $“输入：复选框：选中”。每个函数{ $'li[data-'+$this.prop'name'+'*='+$this.val+'].show； }; }否则{ $li.show； } }; };

价格

£0 - £5 £5 - £10 £10 - £50 £50 - £100 £100 - £500 £500 - £1000 £1000 +

类别

仪器 乐谱 配件 自助餐B12单簧管400英镑 雅马哈单簧管1700英镑 特雷弗·詹姆斯中音萨克斯管700英镑 奥罗斯录音机16英镑

---

可能是因为您没有从jsfiddle中左侧的下拉框中选择Jquery:/可能是因为您没有从jsfiddle中左侧的下拉框中选择Jquery:/这两个ID是相同的，是因为我复制和粘贴了它们，忘记了更改它们，这肯定是我的错误举动。目前只是利用代码看看我是否可以将其应用到mineAh，我刚刚遇到的一件事是，如果我选择一个价格，然后选择仪器，然后再次显示它们，没有考虑到只选择了一个价格区间？不应该这样做，但我今晚回到电脑前会看一看@Navvy@Navvy我现在理解了前面代码的问题。我已经用一些代码更新了答案，这些代码应该可以实现这个目标。我真的很想知道怎么做，但这并不漂亮。如果有更好的方法，我想不出来了：/。啊，是的，这是我一直在尝试的东西，结果是循环中的循环，但无法让它工作，也想不出一个更简单的方法，因为它需要与已经滴答的方法相比较。谢谢这两个ID是相同的，因为我复制和粘贴了它们，但忘记了更改它们，这肯定是我的错误举动。现在只是利用代码看看我

---

我可以把它应用到mineAh，我刚刚遇到的一件事是，如果我选择一个价格，然后选择仪器，然后再次显示它们，不考虑只选择了一个价格带吗？不应该，但我今晚回到电脑前会看一看@Navvy@Navvy我现在理解了前面代码的问题。我已经用一些代码更新了答案，这些代码应该可以实现这个目标。我真的很想知道怎么做，但这并不漂亮。如果有更好的方法，我想不出来了：/。啊，是的，这是我一直在尝试的东西，结果是循环中的循环，但无法让它工作，也想不出一个更简单的方法，因为它需要与已经滴答的方法相比较。谢谢