使用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，則什么也不做）。