在链接中追加和删除值

Question

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

更具体地说，我有带 #filter 和 data-filter=".category-name" 的 href 我需要有一个函数，将 ", .another-category" 添加到每个数据过滤器值的末尾带有 name="filters" 的链接（或者我可以使用一个类而不是更简单的）

<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

堆栈溢出问题

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(): 最大的尊重 - 返回被操纵的元素