Question

这个想法是通过比较动态生成的div类和动态生成的id的复选框来过滤div，其中只有具有与已检查复选框的id＆＃39; s匹配的类的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>

到目前为止，我已经到了。

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

1 个答案: