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