JQueryとデータ属性を使用したマルチフィルター処理

Question

div、JQuery、およびチェックボックスのデータ属性を使用してマルチフィルターを作成しようとしています。チェックボックスを選択すると、JQueryは画面上の要素を削除し、データ属性には選択した項目がすべて含まれないようにします。

'values =' mens 'というチェックボックスの1つで、もう1つが' metal 'の場合、画面上のそれらの要素は、フェードまたは非表示になります。

<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes='["men's","wayfarer","metal","134","133","black","black"]'></div> 

そして、フィルタリングブロックが含まれています：

<div class="information-blocks"> 
        <div class="block-title size-2">Gender</div> 
        <label class="checkbox-entry"> 
         <input type="checkbox" value="men's" class="filter" name="filter[]" /> <span class="check"></span> Men's 
        </label> 
        <label class="checkbox-entry"> 
         <input type="checkbox" value="women's" class="filter" name="filter[]" /> <span class="check"></span> Women's 
        </label> 
        <label class="checkbox-entry"> 
         <input type="checkbox" value="unisex" class="filter" name="filter[]" /> <span class="check"></span> Unisex 
        </label> 
      </div> 
      <div class="information-blocks"> 
       <div class="block-title size-2">Frame Material </div> 
       <label class="checkbox-entry"> 
        <input type="checkbox" value="metal" class="filter" name="filter[]" /> <span class="check"></span> Metal Frames 
       </label> 
       <label class="checkbox-entry"> 
        <input type="checkbox" value="plastic" class="filter" name="filter[]" /> <span class="check"></span> Plastic Frames 
       </label> 
       <label class="checkbox-entry"> 
        <input type="checkbox" value="wood" class="filter" name="filter[]" /> <span class="check"></span> Wood Frames 
       </label> 
      </div> 

私が使用しています：

$('.filter').on('click',function(){ 
      // 
}); 

選択値を捕捉するためにここで

は、サンプルデータattrbuteとdiv要素でありますしかし、私は現在選択されているものをすべて収集してから、そのリストを使って再起する方法はわかりませんデータ属性の値を含まないdivから項目を移動します。

ご協力いただけると幸いです。よろしくお願いします。私はチュートリアルや他のライブラリを見てきましたが、私は複数のソースを使用してクラスの代わりにデータ属性をフィルタリングすることができる何も表示されません。

Answer 1

まずあなたはこのように見えるためにあなたの店 - グリッド項目属性を変更する必要があります。その後

<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes="['men\'s','wayfarer','metal','134','133','black','black']"> 
</div> 

を、あなただけの充当データ属性を取得と比較する必要がありますあなたのフィルターで。

ここでは、コンソールに属性を配列として示すJSFiddleが表示されます。