Question

我一直在尝试为我的页面上返回的数组创建过滤器，并且已经尝试了一段时间，我和这个线程有完全相同的问题：Filtering with checkboxes using jQuery

为什么上面的帖子没有帮助：主要原因是JS和jQuery不是很好，所以难以理解第二种方法（接受的答案）和第一种方法工作< / p>

到目前为止我做了什么：通过这个帖子How to dynamically filter content using checkboxes? - jQuery的帮助我已经创建了一个过滤器（我之前知道:)但仍然无法过滤预期.... Fiddle Here

HTML：

<!-- HTML filter chkboxes -->
<input type="checkbox" id="wm" class="a" />WM
<input type="checkbox" id="tv" class="a" />tv
<input type="checkbox" id="ac" class="a" />ac
<input type="checkbox" id="terrace" class="a" />terrace


<!-- Values to be filetered -->
<div class="wm">WM</div>
<div class="tv">TV</div>
<div class="ac">ac</div>
<div class="terrace">terrace</div>
<div class="wm tv">WM TV</div>
<div class="wm tv ac">wm tv ac</div>
<div class="wm terrace">wm terrace</div>
<div class="tv">tv</div>
<div class="tv ac">tv ac</div>

JS：

$(document).ready(function () {
    $(".a").change(function () {
        $("." + this.id).toggle(this.checked);
    }).change();
});

你的问题又是什么????：虽然我已经在小提琴中提到但是为了快速阅读......我能够隐藏未经检查的过滤器值，但即使它们已经消失了它们也会消失一些class的过滤器已经过检查，可以查看<div class="wm tv">WM TV</div>

我不希望ajax或一些火箭科学jQuery对此进行排序....寻找一些简单的解决方案，考虑到一个noob问它：）

Answer 1

解决方案位于您发布的第一个链接中：

隐藏所有元素，然后遍历复选框和每个元素检查一个.show（）具有相关类别的元素。

 $(document).ready(function () {
    $(".a").change(function () {
        $('div').hide(); //hide all elements
        $(':checkbox:checked').each(function() { //loop through checked checkboxes
            $("." + this.id).show(); //show
        });
    });
});

JSFiddle Demo

Answer 2

我已经为要切换的每个DIV标记添加了一个“商品”类，以便更容易选择它们，但除了我已经单独留下HTML之外。

JSFIDDLE

 $(document).ready(function () {
     var a = $('.a'),items=$('.item');
     a.change(function () {
         var classes = a.filter( ':checked' ).map( function() { return this.id; } );
         items.each( function(){
             var t = $( this );
             for ( var i in classes )
             {
                 if ( t.hasClass( classes[i] ) )
                 {
                     t.show();
                     return;
                 }
             }
             t.hide();
         });
    }).change();
});

a.filter( ':checked' )会将复选框列表仅过滤到已选中的复选框，然后.map()将选中每个复选框，并将给定的函数应用于它，返回包含该函数结果的数组 - 在这种情况下，传递的函数会提取id属性的值，因此您最终会得到已选中复选框的id属性数组。

items.each()遍历要显示/隐藏的每个元素并测试每个元素以查看它是否具有（先前找到的）类之一，如果是，则显示它以及是否没有然后将课程隐藏起来。

使用现有值集中的jquery或JS过滤结果

2 个答案: