过滤数据属性上的元素，而不是jQuery中的类

Question

我正在研究一种简单的方法，用于根据元素的类过滤元素。 用户选中一个复选框，然后jQuery很好，并根据类关闭任何元素。 关闭元素的行以及元素的外观是：

$('#ItemList div:not(.' + Filter + ')').hide();
<div class="1 2 3">asdf</div>

但是，我希望能够使用data-xxxx属性而不是class属性来执行此操作，但实际上在以这种方式选择元素时遇到了问题。 我所拥有的如下：

$("#ItemList div:not([data-filter'" + Filter + "'])").hide();
<div data-filter="1 2 3">asdf</div>

那么，如何使用数据过滤器属性而不是类来选择元素？ 我在这里找到的方法对我不起作用！ 非常感谢。

更新

好的，James Allardice的回信解决了这个问题。 但是引起了另一个问题，我可能应该在原始帖子中说。

每个data-xxxx属性可以具有多个值，我需要此过滤器才能工作，以便如果显示任何一个值都不会隐藏该元素。

$('#Filters input').change(function()
{
    $('#ItemList div').show();
    $('input').each(function()
    {
        var Checked;
        if(Checked = $(this).attr('checked'))
        {
            var Filter = $(this).attr('data-filter');
            $("#ItemList div:not([data-filter='" + Filter + "'])").hide();
        };
});

<div data-filter="1">1</div>
<div data-filter="1 3">1 3</div>

因此，例如，如果选中具有以下属性的复选框，它将显示两个div：

data-filter="1"

但是，如果属性是这样，它将仅显示第二个：

data-filter="3"

Answer 1

你近了 您只是缺少=字符：

$("#ItemList div:not([data-filter='" + Filter + "'])").hide();
//                               ^ You missed this

这是一个有效的例子 。

Answer 2

您可以使用jQuery过滤器功能，如下所示：

$("#ItemList div").filter(function()
    {
        var attr = $(this).attr('data-filter');
        var filterArr = attr.split(" ");
        return $.inArray(Filter, valArr) == -1;
    }
).hide();

我没有测试过，但是应该可以。 你可以找到从这个inArray文档链接和文档从这个过滤功能链接

Answer 3

jQuery（'[[data-name = something]'）或不是，jQuery（'[data-name！= something]'）

在此处查看可用的属性选择器： http : //api.jquery.com/category/selectors/