具有多选择选项的jQuery彩色过滤数据

Question

我试图创建多选择过滤器，可以过滤数据的颜色。例如，当“黑色”被选中时，只需显示黑色，或取消选中“黑色”时，则应显示所有颜色，或者如果选择了“黑色”和“蓝色”，则应显示黑色和蓝色。

过滤器

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

页面主体

<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