javascript - 隐藏所有 div 并显示选中相同类别复选框的 div

Question

尝试构建过滤器。有一个带有静态元素类和动态生成的元素类的元素列表。

<div class="itemswrap">
 <div class="item dynamic1"></div>
 <div class="item dynamic2"></div>
 <div class="item dynamic3"></div>
 <div class="item dynamic2"></div>
</div>

侧边栏中还有一个带有动态生成的 id 的过滤器菜单

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

想法是将过滤器 ID 与元素类匹配，一旦选中复选框，只有具有匹配类的 div 应该可见。

这是我想出的一个js代码

$(".lifilter").each(function(){
    var filter1 = $(this).find('.filtercheck').attr('id');
    if ( $(this).find('input.filtercheck').attr('checked') ) 
    {
      $(".itemswrap .item").hide();
      $('.' + filter1).show();
    }
});

然后什么也没发生...

Answer 1

我认为您想在任何复选框状态更改时显示/隐藏 div。尝试将代码包装在复选框的 change 事件中:

$(".filtercheck").on('change', function(){
    $(".lifilter").each(function(){
        var filter1 = $(this).find('.filtercheck').attr('id');
        if ($(this).find('input.filtercheck').attr('checked')) {
            $(".itemswrap .item").hide();
            $('.' + filter1).show();
        }
    });
});