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();
        }
    });
});

Answer 2

怎么回事：

function refreshDynamicDivs() {
    $(".filtercheck").each(function() {
        var id = $(this).attr("id");
        if($(this).is(":checked")) {
            $("."+id).show();
        }
        else {
            $("."+id).hide();
        }
    });
}

Answer 3

问题是因为checked不会返回使用prop的布尔值，但在您的情况下，您可以使用:checked伪并检查结果长度。

代码：

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

演示：http://jsfiddle.net/c6jrxhzk/

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

3 个答案: