javascript - 基于复选框和 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();
    }
});