Jquery /数据过滤

Question

我试着根据它们的分类来显示一些图片。每一幅图像都属于多个类别。我在代表每个类别的图片上面有链接，这个想法是，当人们点击其中一个链接时，该类别中的图像将被显示，而其他的图像则被隐藏。

我有以下类别链接的代码：

<a class="cat-title" href="#" data-filter="cat-102">Category name</a>
<a class="cat-title" href="#" data-filter="cat-2">Category name</a>
<a class="cat-title" href="#" data-filter="cat-17">Category name</a>
<a class="cat-title" href="#" data-filter="cat-151>Category name</a>

然后对于这些图像：

<a data-tags="cat-2, cat-3, cat-17, cat-101, cat-102, cat-132, cat-151" href="link">
    <img src="src">
</a>
<a data-tags="cat-2, cat-102, cat-151" href="link">
    <img src="src">
</a>

等。

现在的问题是，我对jquery不太了解，但我尝试在谷歌上搜索帮助。问题是，我不仅需要为一个标记过滤图像，还需要对更多的标记进行筛选(以便图像显示它所属的任何类别是否被选中)。我在网上找不到这种情况的任何例子。

任何帮助都是非常感谢的！

Answer 1

你可以这样做：

$('.cat-title').on('click', function (e) {
    e.preventDefault();
    var filter = $(this).data('filter');

    $('[data-tags]')
        .hide()
        .filter('[data-tags*="' + filter + ',"],[data-tags$="' + filter + '"]')
        .show();  
});

https://jsfiddle.net/b2cz2k6a/1/

Answer 2

使用类而不是data-tags。

<a class="filtered-image cat-2 cat-3 cat-17 cat-101"><img src="src"></a>

然后，当用户单击筛选器时，您可以：

$(".cat-title").click(function() {
    $(".filtered-image." + $(this).data("filter")).show();
    return false; // Prevent default link action
});