Question

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

示例：

检查A类和B类只会显示＆＃39; AB＆＃39;并非所有＆＃39; A＆＃39;和＆＃39; B＆＃39;

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()创建一个.来构建一个类选择器，然后您可以使用它直接显示所需的元素。试试这个：

<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

如果选中选项，您将如何修改它以默认显示所有内容？

要做到这一点，你可以检查是否有任何选择，如果没有，则显示所有选项。首先从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();
    }
});

使用Jquery进行复选框过滤

1 个答案: