使用复选框和数据类别过滤产品

Question

我打算通过显示和隐藏带有复选框的 div 来创建过滤器。

我看过this 之类的帖子，但我还没有达到我期望的结果。这是代码的一部分：

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

我正在寻找的结果是，当我选中“Office”复选框时，我希望它显示在数据类别属性中包含 office 的所有 div，无论它只是 office 还是 office 和其他房间类型。

所以，如果我选择了复选框办公室，我只想显示以下 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，因为它在您的问题中提到。

我还为每一行添加了 cmets。

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() 减少到匹配的项目并隐藏那些。