如何为具有标签的图像制作过滤器？

Question

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

如何制作这样的过滤器以及如何应用标签？

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;
}

Answer 1

有很多方法可以做到这一点。你必须找到一种适合你的方式。

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

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

Answer 2

我建议在 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';
}