0

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

4

2 回答 2

0

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

jsFiddle {带复制}

jsFiddle {无}

脚本

$('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

于 2012-12-12T15:53:52.527 回答
0

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

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

堆栈溢出问题

jQuery - 如何将 HTML 5 数据属性添加到 DOM

于 2012-12-12T15:44:38.043 回答