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(); 
    }); 

フィルタ私が現在持っているのは、一度に1つの色しか選択できず、選択されていなければリセットされません。私はそれを変更しようとしましたが、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