1

我正在研究一种根据类过滤元素的简单方法。用户选中一个复选框，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-filter 属性而不是类来选择元素呢？我在这里找到的方法对我不起作用！非常感谢。

更新

好的，所以 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"
4

3 回答 3

4

你很亲密。你只是错过了这个=角色：

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

这是一个工作示例。

于 2012-10-19T11:41:31.663 回答
2

您可以像这样使用 jQuery 过滤器功能：

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

我没有对此进行测试，但它应该可以工作。您可以从此链接中找到 inArray 文档，并从此链接中找到过滤器函数的文档

于 2012-10-19T12:17:06.590 回答
0

jQuery('[data-name=something]') 或者不是，jQuery('[data-name!=something]')

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

于 2012-10-19T11:47:44.453 回答