javascript - 使用 jquery 或 JS 从现有值集中过滤结果

Question

我一直在尝试为我页面上返回的数组创建过滤器，并且已经尝试了一段时间，但我遇到的问题与此线程完全相同:Filtering with checkboxes using jQuery

为什么上面的帖子没有帮助:主要原因是我在 JS 和 jQuery 中不是很好，所以很难理解第二种方法(已接受的答案)和第一种方法有效

到目前为止我做了什么: 在此线程上寻求帮助 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();
});

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

我不希望 ajax 或一些火箭科学的 jQuery 来解决这个问题......考虑到一个菜鸟问它寻找一些简单的解决方案:)

Answer 1

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

Hide all elements, then loop through the checkboxes and for each checked one .show() the elements with the associated category.

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