使用jquery或JS从现有值集中筛选结果

Filter result using jquery or JS from an existing value set

本文关键字：集中 筛选 结果 jquery JS 使用      更新时间：2024-01-31

我一直在尝试为页面上返回的数组创建筛选器，并且已经尝试了一段时间，我遇到了与此线程完全相同的问题：使用jQuery使用复选框进行筛选

为什么上面的线程没有帮助：主要原因是m在JS和jQuery中不是很好，所以很难理解（公认答案的）第二种方法，第一种方法有效

到目前为止我已经做了什么：根据这个线程的帮助如何使用复选框动态过滤内容？-jQuery我已经创建了一个过滤器（我之前知道：）），但仍然无法按预期进行过滤在此处乱动

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，寻找一些简单的解决方案时问它：）

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

隐藏所有元素，然后循环通过复选框和选中了one.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演示

我为您想要切换的每个DIV标记添加了一个'item'类，以便更容易地选择所有标记，但除此之外，我只保留了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()迭代要显示/隐藏的每个元素，并测试每个元素，看看它是否有一个（以前找到的）类，如果有，则显示它，如果没有，则隐藏它

相关文章：