jquery - 使用 jQuery 使用复选框进行过滤

Question

我想使用复选框过滤一些内容。

多亏了 earlier post，我才做到了这一点我在这里简化了一点 DEMO .

我的问题是每个内容项都可以附加多个类别。当我选择类别 A 和类别 B 然后取消选择类别 B 时，同时附加了两个类别的内容项将被删除。

我正在处理的项目将包含两个以上的类别。一个内容项可以附加多个类别

HTML:

<ul id="filters">
    <li>
        <input type="checkbox" value="categorya" id="filter-categorya" />
        <label for="filter-categorya">Category A</label>
    </li>
    <li>
        <input type="checkbox" value="categoryb" id="filter-categoryb" />
        <label for="filter-categoryb">Category B</label>
    </li>
</ul>

<div class="categorya categoryb">A, B</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>

Javascript:

$('input').click(function() {
    var category = $(this).val();

    if (!$(this).attr('checked')) $('.' + category).hide();
    else $('.' + category).show();

});

Answer 1

我认为两种最直接的方法是点击任何过滤器复选框:

1. 隐藏全部 <div>元素，然后遍历复选框并为每个选中一个 .show() <div>具有关联类别的元素。

2. 遍历所有复选框以列出要显示的类，然后遍历 <div>。元素，检查每个元素以查看它是否具有这些类之一和 .hide()或 .show()视情况而定。

是否有一些通用选择器可用于获取所有 <div>元素？它们是否具有特定的容器元素，例如所有复选框都是“#filters”的后代？

// Solution 1

$("#filters :checkbox").click(function() {
   $("div").hide();
   $("#filters :checkbox:checked").each(function() {
       $("." + $(this).val()).show();
   });
});

演示:http://jsfiddle.net/6wYzw/41/

// Solution 2

$("#filters :checkbox").click(function() {

   var re = new RegExp($("#filters :checkbox:checked").map(function() {
                          return this.value;
                       }).get().join("|") );
   $("div").each(function() {
      var $this = $(this);
      $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
   });
});

演示:http://jsfiddle.net/6wYzw/42/

我想第一种方式更短，更容易维护......