Как сделать фильтр для изображений с тегами?

Question

У меня есть продукты в сетке, используя следующий код. Интересно, как создать фильтр, чтобы пользователь, щелкнув поле, которое говорит, например, «зеленый», на сайте показывает только изображения с зеленым тегом.

Как вы делаете такой фильтр и как применять теги?

пс. Я не имею в виду <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; 
} 

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

Answer 2

Там много способов сделать это. Вам просто нужно найти способ, который подходит вам.

Я не уверен по всем вашим требованиям, но Isotope имеет filtering, который довольно прост в использовании. Вот demo.

Если вам нужно немного больше контроля, вы можете посмотреть в TaffyDB и сгенерировать HTML на основе результатов запроса.