如何为带有标签的图像创建过滤器？

debugcn 发表于 Dev

用户名

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

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

ps。我不是说<div>标签，而是说“哦，那件球衣是：“ Hoodie”，“ Green”，“ Zipper”，等等。只是以为我要澄清一下。

提前致谢：）

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

奥斯汀·布伦霍斯特（Austin Brunkhorst）

我建议将逗号分隔的字符串列表存储在data属性中，然后遍历图像并进行过滤。例如：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。