jQuery(JS？)如何根据数组中的值过滤元素

Question

我希望用户能够过滤页面上的一系列元素。

元素具有存储在数据属性中的标签。我已将其设置为当用户单击过滤器区域(#filters)中的标签名称之一时，该标签将添加到数组中。当再次单击标签时，它将从数组中删除。

当单击标签时，我希望 jQuery 扫描要过滤的元素 (#elementstofilter) 并隐藏那些不具有过滤器数组中当前保存的所有标签的元素。

该过滤器是 AND 过滤器，因此如果选择了 Tag1 和 Tag2，它只会显示同时具有这两个标签的元素(#d1 和 #d3)在下面的示例中)。

我觉得解决方案可能非常简单，但我很难找到答案。也许有一种更有效的方法可以完全做到这一点。

<ul id="filters">
<li data-filter="tag1">Tag1</li>
<li data-filter="tag2">Tag2</li>
<li data-filter="tag3">Tag3</li>
<li data-filter="tag4">Tag4</li>
<li data-filter="tag5">Tag5</li>
</ul>

<ul id="elementstofilter">
<li class="project" id="d1" data-tags="tag1 tag2 tag3 tag4 tag5"></li>
<li class="project" id="d2" data-tags="tag1"></li>
<li class="project" id="d3" data-tags="tag1 tag2 tag5"></li>
<li class="project" id="d4" data-tags="tag3 tag4"></li>
</ul>

这是我迄今为止得到的 jQ。目前还没有太多内容。

var filter=[]; // Array to hold filter values
$('#filters li').click(function() {
    var sel=$(this).attr('data-filter');
    if($(this).hasClass('sel')) { // Add or remove values from the filter
        filter.push(sel);
    } else {
        filter=$.grep(filter, function(value) {
            return value!=sel;
        });
    }
    if(filter.length==0) { // Show all projects if no filters are selected
        $('.project:hidden').show();
    } else { // At least one filter is on
        /*
        if all of the values in the filter are represented in the data-tags of a project
            if that project is hidden
                show that project
        else
            hide that project
        */
    }
});

Answer 1

更改代码以将标记用作类，以便您可以使用标准选择器。

过滤变得非常容易:

$('.project').hide().filter('.tag1,.tag2').show();