Question

我正在尝试创建可以按颜色过滤数据的多选过滤器。例如，＆＃34; Black＆＃34;选择只有黑色必须显示或当＆＃34;黑＆＃34;如果取消选择，则应显示所有颜色，或者如果＆＃34; Black＆＃34;和＆＃34;蓝＆＃34;选中后，应显示黑色和蓝色。

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

jQuery按颜色过滤数据，可选择多选

1 个答案: