使用JQuery复选框过滤项目列表

Question

我有两个不同的复选框。 价格和类别。

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

我正在使用JQuery来过滤结果，但是我似乎无法得到它，因此，当没有勾选任何复选框时，所有产品都将显示，例如，如果没有勾选任何价格，但类别中的工具是，所有乐器均显示。 它们由<li>标记中的class标记标识，在我的代码中，该标记是从JSON文件设置的，但是在JSFiddle中，我只是放置了一些示例测试数据。

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

这是我的代码：

 $(document).ready(function() { $("#price :checkbox").click(function() { $("li").hide(); $("#price :checkbox:checked").each(function() { $("." + $(this).val()).show(); }); }); $("#category :checkbox").click(function() { $("li").hide(); $("#category :checkbox:checked").each(function() { $("." + $(this).val()).show(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <section id="price"> <p id="fHeader">Price</p> <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5 <br> <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10 <br> <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50 <br> <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100 <br> <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500 <br> <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000 <br> <input type="checkbox" name="price" value="p7" id="p7" />£1000 + <br> </section> <section id="category"> <p id="fHeader">Category</p> <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments <br> <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music <br> <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories <br> </section> <article id="products"> <ul id="productList"> <li class="instruments p5 buffet woodwind clarinet">Buffet B12 Clarinet £400</li> <li class="instruments p7 yamaha woodwind clarinet">Yamaha Clarinet £1700</li> <li class="instruments p6 trevorjames woodwind alto-saxophone">Trevor James Alto Saxophone £700</li> <li class="instruments p3 aulos woodwind recorder">Aulos Recorder £16</li> </ul> </article> 

关于如何从此处进行处理的任何帮助将不胜感激。 谢谢。

Answer 1

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

 $(document).ready(function () { $('#filters :checkbox').click(function () { if ($('input:checkbox:checked').length) { $('li').hide(); $('input:checkbox:checked').each(function () { $('li[data-' + $(this).prop('name') + '*="' + $(this).val() + '"]').show(); }); } else { $("li").show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <article id="filters"> <section id="price"> <p id="fHeader">Price</p> <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5 <br/> <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10 <br/> <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50 <br/> <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100 <br/> <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500 <br/> <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000 <br/> <input type="checkbox" name="price" value="p7" id="p7" />£1000 + <br/> </section> <section id="category"> <p id="fHeader">Category</p> <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments <br/> <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music <br/> <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories <br/> </section> </article> <article id="products"> <ul id="productList"> <li data-price="p5" data-category="instruments">Buffet B12 Clarinet £400</li> <li data-price="p7" data-category="instruments">Yamaha Clarinet £1700</li> <li data-price="p6" data-category="instruments">Trevor James Alto Saxophone £700</li> <li data-price="p3" data-category="instruments">Aulos Recorder £16</li> </ul> </article> 

我还注意到您有两个id="fHeader" 。 这很糟糕，真的很糟糕...

---

编辑正确和/或搜索

这有点复杂。 它创建一个值数组和一个类型数组。 然后，我们遍历每个LI，遍历每种类型，遍历每个值（在一个循环中的一个循环中，yikes！），其基础是所有类型都需要至少一个正确的值才能显示LI。

我还可以通过放置一个来确保您的价值观与众不同; 或它们之前或之后的内容，因为例如“ piano”也将与“ grand-piano”匹配，而“; piano;” 将不匹配“;大钢琴;”

 $('#filters input:checkbox').click(function () { if ($('input:checkbox:checked').length) { var arrSelected = []; // Create Array of Values var arrTypes = []; // Create Array of Types $('input:checkbox:checked').each(function () { if (arrSelected[$(this).prop('name')] == undefined) { arrSelected[$(this).prop('name')] = []; } arrSelected[$(this).prop('name')].push($(this).val()); if ($.inArray($(this).prop('name'), arrTypes) < 0) { arrTypes.push($(this).prop('name')); } }); $('li').each(function() { $(this).hide(); var intKeyCount = 0; for (key in arrTypes) { // AND (check count of matching types) var blnFound = false; for (val in arrSelected[arrTypes[key]]) { // OR (check one of values matches type) if ($(this).attr('data-' + arrTypes[key]).indexOf(arrSelected[arrTypes[key]][val]) > -1) { blnFound = true; break; } } if (blnFound) { intKeyCount++; } } if (intKeyCount > 0 && intKeyCount != arrTypes.length - 1) { $(this).show(); } }); } else { $("li").show(); } }); 

 body { font-family:arial; font-size:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <article id="filters"> <section id="price"> <p id="fHeader">Price</p> <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5 <br/> <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10 <br/> <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50 <br/> <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100 <br/> <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500 <br/> <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000 <br/> <input type="checkbox" name="price" value="p7" id="p7" />£1000 + <br/> </section> <section id="category"> <p id="fHeader">Category</p> <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments <br/> <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music <br/> <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories <br/> </section> </article> <article id="products"> <ul id="productList"> <li data-price="p5" data-category="instruments">Buffet B12 Clarinet £400</li> <li data-price="p7" data-category="instruments">Yamaha Clarinet £1700</li> <li data-price="p6" data-category="instruments">Trevor James Alto Saxophone £700</li> <li data-price="p3" data-category="instruments">Aulos Recorder £16</li> </ul> </article> 

Answer 2

在每个循环之前，显示所有列表项并检查选中了多少个复选框（如果值为0，则什么也不做）。