使用 Jquery 进行复选框过滤

Question

我正在使用此代码：http://jsfiddle.net/6wYzw/42/ 过滤类别，但我需要功能稍有不同。如果选中了多个过滤器，则会显示最包含两者的项目。

例子：

检查类别 A 和 B 只会显示“AB”而不是“A”和“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>

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

JS：

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

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

Answer 1

您不需要为此使用正则表达式。相反，您可以通过. 使用map() 创建的数组join() 来构建一个类选择器，然后您可以使用它直接显示所需的元素。试试这个：

<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="category-container">
    <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>
</div>

$("#filters :checkbox").click(function() {
    var filter = '.' + $("#filters :checkbox:checked").map(function() {
        return this.value;
    }).get().join(".");

    $('.category-container div').hide();
    $(filter).show();
});

Updated fiddle

在选中选项之前，您将如何修改它以默认显示全部？

为此，您只需检查是否选择了任何内容，如果没有，则显示所有选项。首先从.categorya, .categoryb中删除display: none，然后将JS修改为：

$("#filters :checkbox").click(function() {
    var filter = $("#filters :checkbox:checked").map(function() {
        return this.value;
    }).get().join(".");

    if (filter) {
        $('.category-container div').hide();
        $('.' + filter).show();
    } else {
        $('.category-container div').show();
    }
});