使用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

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

<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();
});

更新了小提琴

在检查选项之前,您将如何修改它以默认显示所有内容？

要做到这一点,您可以检查是否选择了任何内容,如果没有,则显示所有选项.首先display: none从中删除.categorya, .categoryb,然后将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();
    }
});