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>

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

更新

好的，詹姆斯·阿拉迪斯的答复就是这样做的。但是引起了另一个问题，我可能应该在原帖中说过。

每个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

这是working example。

Answer 2

你可以像这样使用jQuery过滤器函数：

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

我没有测试过这个，但它应该可行。您可以从此link找到inArray文档，并从此link找到过滤器函数的文档

Answer 3

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

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

在jQuery中过滤data-attribute而不是class的元素

3 个答案: