jsFiddle {with replication}

Question

所以我使用http://isotope.metafizzy.co来过滤网站上的不同商品。菜单应该是“构建”类型，其中当单击一个类别时，它会过滤到这些类别，当单击下一个类别时，它会将这些新单击的类别添加到现有的类别过滤器中。当它第二次点击时，它应该从过滤器中删除该类别。

更具体地说，我使用#filter和data-filter =“。category-name”href我需要一个函数，在每个数据过滤器值的末尾添加“.another-category”名称=“过滤器”的链接（或者我可以使用类而不是更容易）

<ul>
 <li><a href="#filter" onclick="addFilter('.kitchens');" name="filters" data-filter=".kitchens">Kitchens</a></li>
 <li><a href="#filter" onclick="addFilter('.bathrooms');" name="filters" data-filter=".bathrooms">Bathrooms</a></li>
 <li><a href="#filter" onclick="addFilter('.living-rooms');" name="filters" data-filter=".living-rooms">Living Rooms</a></li>
 <li><a href="#filter" onclick="addFilter('.bedrooms');" name="filters" data-filter=".bedrooms">Bedrooms</a></li>
</ul>

我知道这个函数是错误的并且不起作用，但它只是一些伪代码

    function addFilter(filter) {
        names = document.getElementsByName("filters");
        for (var name in names) {
            name.data-filter = "existing filter, " + filter; // this should be appended to all data-filters
        }
    }

所以基本上当点击一个链接时它只过滤到该类别（比如说厨房），但也将类别添加到其余的数据过滤器（.bedrooms，.kitchens）

javascript或jquery或我可能没有意识到的其他任何东西都可以工作。同位素的文档可以选择过滤多组项目，但我需要它来过滤单个项目的组合。也许可以将他们的组合过滤器修改为项而不是组？

Answer 1

请参阅本文中的以下文章。它应该让你朝着正确的方向前进。

http://www.queness.com/post/7050/8-jquery-methods-you-need-to-know

Stackoverflow问题

jQuery - How to add HTML 5 data attributes into the DOM

Answer 2

嗯，你标记了jQuery，这让这很容易，但我只看到你使用JS。无论如何，这是一种方式和一些额外的信息，希望它有所帮助：

jsFiddle {with replication}

jsFiddle {without}

脚本

$('li a[name="filters"]').on("click", function(e) {
    e.preventDefault();
    $(this).data("filter", $(this).data("filter") + ".another-category");
    /*  and if i wanted to do it without replicating already existing info:
    var f = $(this).data("filter");
    if (f.indexOf(".another-category") == -1) f += ".another-category";
    $(this).data("filter", f); */
});

HTML

<ul>
    <li><a href="#filter" name="filters" data-filter=".kitchens">Kitchens</a></li>
    <li><a href="#filter" name="filters" data-filter=".bathrooms">Bathrooms</a></li>
    <li><a href="#filter" name="filters" data-filter=".living-rooms">Living Rooms</a></li>
    <li><a href="#filter" name="filters" data-filter=".bedrooms">Bedrooms</a></li>
</ul>

X-tra NFO

jQuery.data()：最大偏差 - 返回已设置的值
jQuery's .data()：最大偏差 - 返回被操纵的元素

在链接中追加和删除值

2 个答案:

jsFiddle {with replication}

jsFiddle {without}