jQuery 使用多选选项按颜色过滤数据

Question

我正在尝试创建可以按颜色过滤数据的多选过滤器。 For example when "Black" is selected only black has to be shown or when "Black" is deselected then all colors should be displayed, or if "Black" and "Blue" is selected then black and blue should be displayed.

过滤 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