您如何为带有标签的图像制作过滤器？答案

【问题标题】：How do you make a filter for images that have tags?您如何为带有标签的图像制作过滤器？
【发布时间】：2013-11-16 21:21:44
【问题描述】：

我使用下面的代码在网格中有产品。我想知道如何制作一个过滤器，以便当用户单击一个显示例如“绿色”的框时，该网站只显示具有绿色标签的图像。

这样的过滤器是怎么做的，如何应用标签？

ps。我的意思不是<div> 之类的标签，我的意思是“哦，那件球衣是：“连帽衫”“绿色”“拉链”等。只是想我会澄清一下。”

提前感谢:)

HTML：

<div id="Backgrounds">                                
                            <img id="Hajar" src="Backgrunder/Hajar.jpg">
                            <img id="Labyrint" src="Backgrunder/Labyrint.jpg">
                            <img id="Martini" src="Backgrunder/Martini.jpg">                              
                            <img id="FärgadePapper" src="Backgrunder/FärgadePapper.jpg">
                            <img id="Hajar" src="Backgrunder/Hajar.jpg">
                            <img id="Labyrint" src="Backgrunder/Labyrint.jpg">
                            <img id="Martini" src="Backgrunder/Martini.jpg">                               
                            <img id="FärgadePapper" src="Backgrunder/FärgadePapper.jpg">
                            <img id="Hajar" src="Backgrunder/Hajar.jpg">
                            <img id="Labyrint" src="Backgrunder/Labyrint.jpg">
                            <img id="Martini" src="Backgrunder/Martini.jpg">                                
                            <img id="FärgadePapper" src="Backgrunder/FärgadePapper.jpg">
                            <img id="Hajar" src="Backgrunder/Hajar.jpg">
                            <img id="Labyrint" src="Backgrunder/Labyrint.jpg">
                            <img id="Martini" src="Backgrunder/Martini.jpg">                               
                        </div>

CSS：

#Backgrounds img{
    width: 97px;
    display: inline-block;
    vertical-align: top;
    padding: 4px;
    cursor: pointer;
}

【问题讨论】：

这些标签在哪里，它们是如何定义的？
也 - 一些图像 id 重复。这是错误的。
现在只使用相同的图像，因为我很懒 :P 关于标签，这是我的问题，我如何添加这些标签以及如何使用它们来过滤图像？
所以你懒得写一个正确的问题，但希望人们为你写一个答案？

标签： javascript html css tags

【解决方案1】：

我建议将逗号分隔的字符串列表存储在 data attribute 中，然后遍历图像并以这种方式过滤。例如：

HTML

<div id="backgrounds">
    <img id="Hajar" data-tags="hoodie,zipper,green" src="Backgrunder/Hajar.jpg">
    <img id="Labyrint" data-tags="these,are,tags" src="Backgrunder/Labyrint.jpg">
</div>

JavaScript

function filterImages(tag) {
    // select all the images
    var query = document.querySelectorAll('#Backgrounds img');

    for (var i = 0; i < query.length; i++) {
        var image = query[i];

        // hide the image if it doesn't contain the tag we're looking for
        if (image.getAttribute('data-tags').split(',').indexOf(tag) === -1)
            hideImage(image);
    }
}

function hideImage(image) {
    // do whatever you need to "filter" out the image
    image.style.display = 'none';
}

【讨论】：

对不起，我没有那么有经验，我在哪个变量中发送用户选择的标签？以及如何？

【解决方案2】：

有很多方法可以做到这一点。你只需要找到适合你的方法。

我不确定您的所有要求，但Isotope 有filtering，非常易于使用。这是demo。

如果您需要更多控制权，可以查看 TaffyDB 并根据查询结果生成 HTML。

【讨论】：

非常感谢。我想我会选择 Isotope，看起来非常适合我的需要！