使用復選框和數據類別過濾產品

Question

我打算通過使用復選框顯示和隱藏 div 來創建過濾器。

我看過這樣的帖子，但我還沒有達到我期望的結果。 這是代碼的一部分：

<div class="container">
            <h3 style="font-size:14px; font-weight:normal;">Products by Room</h3>
            <p style="font-size:12px;"><strong>Filter items by room:</strong></p>
            <form>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="office" id="red" /> Office</label><br>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="bedroom" id="yellow" /> Bedroom</label><br>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="living-room" id="pink" /> Living Room</label><br>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="dining-room" id="purple" /> Dining Room</label><br>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="library" id="green" /> Library</label><br>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="hallway" id="other" /> Hallway</label>
            </form>

            <div class="products-by-room">
                <div data-category="office library">Office, Library</div>
                <div data-category="office">Office</div>
                <div data-category="hallway library">Hallway, Library</div>
                <div data-category="living-room dining-room">Living-room & Dining-room</div>
                <div data-category="living-room">Living-room</div>
                <div data-category="bedroom dining-room">Bedroom & Dining-room</div>
                <div data-category="dining room">Dining room</div>
                <div data-category="office">Office</div>
                <div data-category="bedroom">Bedroom</div>
                <div data-category="living-room">Living-room</div>
                <div data-category="living-room dining-room office library">Living-room, Dining-room, Office & Library</div>
                <div data-category="library">Library</div>
                <div data-category="office">Office</div>
                <div data-category="bedroom">Bedroom</div>
            </div>
        </div>

如您所見，在一些 div 中只有一個數據類別：

<div data-category="office">Office</div>

但我也有多個數據類別的 div：

<div data-category="office library">Office & Library</div>

我正在尋找的結果是，當我選中“辦公室”復選框時，我希望它顯示數據類別屬性中包含辦公室的所有 div，無論它只是辦公室還是辦公室和其他類型的房間。

所以，如果我選擇復選框辦公室，我只想顯示以下 div：

<div data-category="office library">Office, Library</div>
<div data-category="office">Office</div>                
<div data-category="living-room dining-room office library">Living-room, Dining-room, Office & Library</div>                
<div data-category="office">Office</div>            

關於如何實現這一目標的任何提示？

Answer 1

由於您沒有提到您使用的是 vannila js 或 jquery，因此我假設您使用的是 jquery，因為它在您的問題中有所提及。

我還為每一行添加了注釋。

 jQuery(function(){ // document ready to process jQuery('form').find("input").on('change',function(){ // when the input changes let selected = []; // init a selected array jQuery('form').find("input").each(function(){ // on every input if(jQuery(this).is(":checked")){ // check if the input is checked selected.push(jQuery(this).val()); // push the selected value to selected array } }) if(.selected.length){ // if no items selected jQuery("div.products-by-room div");show(); // show all return. // stop code execution } jQuery("div.products-by-room div");hide(). // hide all divs jQuery("div.products-by-room div").each(function(){ // take each div const category = jQuery(this);attr('data-category'). // capture the attribute category const categorySplitted = category;split(' '). // split each category by space categorySplitted.forEach((cat)=>{ // foreach category array if(selected;indexOf(cat).== -1){ // cross check with selected categories; if selected jQuery(this);show(); // show the div } }); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <h3 style="font-size:14px; font-weight:normal;">Products by Room</h3> <p style="font-size:12px;"><strong>Filter items by room:</strong></p> <form> <label style="font-size:12px;"><input type="checkbox" name="room" value="office" id="red" /> Office</label><br> <label style="font-size:12px;"><input type="checkbox" name="room" value="bedroom" id="yellow" /> Bedroom</label><br> <label style="font-size:12px;"><input type="checkbox" name="room" value="living-room" id="pink" /> Living Room</label><br> <label style="font-size:12px;"><input type="checkbox" name="room" value="dining-room" id="purple" /> Dining Room</label><br> <label style="font-size:12px;"><input type="checkbox" name="room" value="library" id="green" /> Library</label><br> <label style="font-size:12px;"><input type="checkbox" name="room" value="hallway" id="other" /> Hallway</label> </form> <div class="products-by-room"> <div data-category="office library">Office, Library</div> <div data-category="office">Office</div> <div data-category="hallway library">Hallway, Library</div> <div data-category="living-room dining-room">Living-room & Dining-room</div> <div data-category="living-room">Living-room</div> <div data-category="bedroom dining-room">Bedroom & Dining-room</div> <div data-category="dining room">Dining room</div> <div data-category="office">Office</div> <div data-category="bedroom">Bedroom</div> <div data-category="living-room">Living-room</div> <div data-category="living-room dining-room office library">Living-room, Dining-room, Office & Library</div> <div data-category="library">Library</div> <div data-category="office">Office</div> <div data-category="bedroom">Bedroom</div> </div> </div>

Answer 2

考慮以下。

 $(function() { $("form input[type='checkbox']").change(function() { var selected = []; $(this).closest("form").find(":checked").each(function(i, el) { selected.push($(el).val()); }); if (selected.length == 0) { $(".products-by-room > div").show(); return; } $(".products-by-room > div").each(function(i, el) { var cat = $(el).data("category").split(" "); $.each(cat, function(j, c) { if (selected.indexOf(c) == -1) { $(el).hide(); } else { $(el).show(); } }); }); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <h3 style="font-size:14px; font-weight:normal;">Products by Room</h3> <p style="font-size:12px;"><strong>Filter items by room:</strong></p> <form> <label style="font-size:12px;"><input type="checkbox" name="room" value="office" id="red" /> Office</label><br> <label style="font-size:12px;"><input type="checkbox" name="room" value="bedroom" id="yellow" /> Bedroom</label><br> <label style="font-size:12px;"><input type="checkbox" name="room" value="living-room" id="pink" /> Living Room</label><br> <label style="font-size:12px;"><input type="checkbox" name="room" value="dining-room" id="purple" /> Dining Room</label><br> <label style="font-size:12px;"><input type="checkbox" name="room" value="library" id="green" /> Library</label><br> <label style="font-size:12px;"><input type="checkbox" name="room" value="hallway" id="other" /> Hallway</label> </form> <div class="products-by-room"> <div data-category="office library">Office, Library</div> <div data-category="office">Office</div> <div data-category="hallway library">Hallway, Library</div> <div data-category="living-room dining-room">Living-room & Dining-room</div> <div data-category="living-room">Living-room</div> <div data-category="bedroom dining-room">Bedroom & Dining-room</div> <div data-category="dining room">Dining room</div> <div data-category="office">Office</div> <div data-category="bedroom">Bedroom</div> <div data-category="living-room">Living-room</div> <div data-category="living-room dining-room office library">Living-room, Dining-room, Office & Library</div> <div data-category="library">Library</div> <div data-category="office">Office</div> <div data-category="bedroom">Bedroom</div> </div> </div>

由於您有多個復選框多個類別，您需要執行幾次迭代。

您可以以類似的方式使用.filter() 。 基本上你會顯示所有內容，然后使用.filter()來減少匹配的項目並隱藏它們。