基于复选框和 div id 的多个过滤器和类

Question

我们的想法是通过比较为 div 动态生成的类和为复选框动态生成的 id 来过滤 div，其中只有具有类与选中复选框的 id 匹配的 div 才会显示。

第一个子导航过滤一切都很好。但是，subnav2 没有做任何事情。

它的简化 html

<div class="itemswrap">
  <div class="inditem dynamic1 dynamic12"></div>
  <div class="inditem dynamic2 dynamic22"></div>
  <div class="inditem dynamic3 dynamic32"></div>
  <div class="inditem dynamic2 dynamic42"></div>
</div>


<ul class="subnav">
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic1" />
    <label for="dynamic1">whatever label</label>
  </li>
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic2" />
    <label for="dynamic1">whatever label</label>
  </li>
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic3" />
    <label for="dynamic1">whatever label</label>
  </li>
</ul> 

<ul class="subnav2">
  <li class="lifilter2">
    <input type="checkbox" class="filtercheck2" id="dynamic12" />
    <label for="dynamic12">whatever label</label>
  </li>
  <li class="lifilter2">
    <input type="checkbox" class="filtercheck2" id="dynamic22" />
    <label for="dynamic12">whatever label</label>
  </li>
  <li class="lifilter2">
    <input type="checkbox2" class="filtercheck2" id="dynamic32" />
    <label for="dynamic12">whatever label</label>
  </li>
</ul>

以及我目前掌握的 js。

  var $filters = $('.filtercheck').change(function() {
  var $items = $('.inditem').hide();
  var filters = $filters.filter(':checked').map(function() {
    return '.' + this.id;
  }).get();
  if (filters.length) {
    $items.filter(filters.join()).show();
  } else {
    $items.show();
  }
});

  var $filtersb = $('.filtercheck2').change(function() {
  var $itemsb = $('.inditem').hide();
  var filtersb = $filtersb.filter(':checked').map(function() {
    return '.' + this.id;
  }).get();
  if (filtersb.length) {
    $itemsb.filter(filters.join()).show();
  } else {
    $itemsb.show();
  }
});

Answer 1

我看到你修复了它，但我已经为你的问题创建了一个 jsfiddle，类似于我在另一个项目中不得不面对的问题。基本上，您从选中的复选框 ID 创建一个字符串，并使用它来仅显示与您选中的元素匹配的那些项目。如果未选中任何元素，则会显示所有项目（即未应用过滤器）。

$("input[type='checkbox']").change(function()
{
    var list = "";

    $("input[type='checkbox']").each(function()
    {
        if(this.checked)
        {
            list = list + '.' + $(this).attr('id');
        }
    });

    if(list !=='')
    {
        $("div.inditem").hide();
        $(list).show();
    }
    else {
        $("div.inditem").show();
    }
});

基于复选框和 div id 的多个过滤器和类

multiple filters based on checkbox and divs id's and classes

html

javascript

checkbox

jquery

基于复选框和 div id 的多个过滤器和 类

multiple filters based on checkbox and divs id's and classes

html

javascript

checkbox

jquery

基于复选框和 div id 的多个过滤器和类