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

使用类而不是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
});

Answer 2

你可以这样做：

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

Jquery /数据过滤

2 个答案: