過濾數據屬性上的元素，而不是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/