jQuery過濾數據按顏色與多選的選項

Question

我想創建可以按顏色過濾數據的多選過濾器。 例如，當選擇「黑色」時，只需顯示黑色或取消選擇「黑色」，則應顯示所有顏色，或者選擇「黑色」和「藍色」，則應顯示黑色和藍色。

篩選HTML

<ul id="color-filter">  
    <li data-filter="black">Black</li>  
    <li data-filter="blue">Blue</li> 
    <li data-filter="brown">Brown</li> 
</ul> 

頁正文的HTML

<div class="material-tiles"> 
    <div class="grid-3 samples" data-color="black" data-popularity="0"> 
    .... 
    </div> 
    <div class="grid-3 samples" data-color="black" data-popularity="0"> 
    .... 
    </div> 
    <div class="grid-3 samples" data-color="blue" data-popularity="0"> 
    .... 
    </div> 
    <div class="grid-3 samples" data-color="blue" data-popularity="0"> 
    .... 
    </div> 
    <div class="grid-3 samples" data-color="blue" data-popularity="0"> 
    .... 
    </div> 
    <div class="grid-3 samples" data-color="brown" data-popularity="0"> 
    .... 
    </div> 
</div> 

jQuery的

//Materials filter selector script// 
    function checkboxSellector (obj) { 
     var formCheckbox = obj.find('.form-checkmark'); 
     var checkBox = obj.find('.checkbox'); 
     $(function() { 
      $(formCheckbox).click(function() { 
       $(this).closest(formCheckbox).toggleClass('is-selected'); 
       $(this).find(checkBox).toggleClass('checkmark'); 
      }); 
     }); 
    } 
    checkboxSellector($(this));  

function onGridChangeRequest() { 
     $('.material-tiles > .samples').each(function(key, item) { 
      item = $(item); 
      if (validateByColor(item, selectedColor) && validateByType(item, selectedMaterial)) { 
       item.show(); 
      } else { 
       item.hide(); 
      } 
     }); 
    } 
    $('#color-filter > li').on('click', function(e) { 
     selectedColor = $(this).data('filter'); 
     onGridChangeRequest(); 
    }); 

過濾器我目前有一次只能選擇一種顏色，如果未選中，將不會重置，我試圖改變它，但對jQuery或JavaScript沒有多少經驗。

幫助請。

Answer 1

var $colorFilter = $('#color-filter'), 
    $materialTiles = $('.material-tiles'), 
    selected = []; 

function onGridChangeRequest() { 
    selected = []; 
    $colorFilter.find('.selected').each(function(i, el) { 
    selected.push($(this).attr('data-filter')); 
    }) 

    $materialTiles.find('.samples').each(function(i, el) { 
     if(selected.length) { 
     if (selected.indexOf($(el).attr('data-color')) !== -1) { 
      $(el).show(); 
      return; 
     } 
     $(el).hide(); 
     return; 
     } 
     $(el).show(); 
    }) 
} 

$('#color-filter > li').on('click', function(e) { 
    $(this).toggleClass('selected'); 
    onGridChangeRequest(); 
}); 

這是我能想到的最好的東西。學習代碼，以便了解它的工作原理。 ：D