javascript - 基于复选框和div ID和类别的多个过滤器

这个想法是通过比较div的动态生成类和复选框的动态生成的id来过滤div，其中仅显示具有与选中复选框的id匹配的类的div。

第一个subnav过滤一切正常。但是，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();
  }
});

最佳答案

我看到您已解决此问题，但我为您的问题创建了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();
    }
});