チェックボックスを使用したアイソトープのフィルタリング

Question

アイソトープをフィルタリングして問題を解決しようとしていますが、私は立ち往生しています。

私はリスト内のすべてのチェックボックスのチェックを外すために、クリアリストボタンとそのチェックボックスのチェックを外し、isotope（{filter： '*'}）をクリックしてください。

私の問題は、クリアリストボタンをクリックしたときに、グリッドコンテナのアイソトープをクリアする方法を理解できないことです。 論理的には、グリッドコンテナは特定のリストの値なしで同位体でなければなりません。 そして、ときにすべてのリストは、グリッドは、（{フィルタ：「*」}）を同位体なければならない明確なリストのボタンでクリアされている

ここでは、あなたが見ることのために私のJSコード

function initIsotope(){ 

    var $wrapper = $('.wrapper'); 

    if($wrapper.length < 1){ 
    return; 
    } 

    var $filters = $('.filters', $wrapper); 
    var $grid = $('.grid-container', $wrapper); 
    var $checkboxList = $ ('.checkbox-list', $wrapper); 
    var $checkboxes = $('.checkbox-control', $wrapper); 
    var $clearList = $('.clear-list', $wrapper); 
    var $clearAll= $('.clear-all', $wrapper); 

    //init Isotope 
    $grid.isotope({ 

     itemSelector: '.grid-item', 
     layoutMode: 'fitRows' 

    }); 

    //isotope filtering on checkbox click 
    // this part of code is from http://jsfiddle.net/desandro/DQydj/ 
    $checkboxes.change(function(){ 

    var filters = []; 
    // get checked checkboxes values 
    $checkboxes.filter(':checked').each(function(){ 
     filters.push(this.value); 
    }); 

    filters = filters.join(', '); 
    $grid.isotope({ filter: filters }); 
    }); 



    //clear list 
    $clearList.on('click', function(e){ 

    e.preventDefault(); 

    var $self = $(this); 

    $self.closest($checkboxList).find($checkboxes).prop("checked", false); 

    //Im stuck here 

    }); 




    //clear-all lists 
    $clearAll.on('click',function(e){ 

    e.preventDefault(); 
    $checkboxes.prop("checked", false); 

    $grid.isotope({ filter: '*' }); 

    }); 



} 



$(function(){ 
    initIsotope(); 
}); 

はjsfiddle例を持っています： https://jsfiddle.net/timosergio/at7gtc1g/35/

お願いします。

PS：私はjsFiddleを更新しました。私はより近づいていますが、欲望の結果です。あなたが気にしてそれをチェックしてください

Answer 1

closest($checkboxList)が訂正された後で、$clearList.on('click')に唯一欠けているものは、フィルタアレイを "リセット"することです...他のチェックボックスリストの可能な値を "再設定"してください。あなたはフィルタとして使用するgrid.isotopeする値の配列を送信
あなたが機能$checkboxes.changeで行うと同様

// Empty filter array 
var filters = []; 
// get checked checkboxes values 
$checkboxes.filter(':checked').each(function(){ 
    filters.push(this.value); 
}); 

filters = filters.join(', '); 
$grid.isotope({ filter: filters }); 

...。

あなたはすでにあなたが'*'を送信している$clearAll.on('click')
に正しいことを行います。

EDIT
私は冗長なコードを避けることによって、スクリプトを簡単にするために私のバイオリンを更新しました。
チェックボックスの値を取得する部分で「サブ関数」を作成しました。
;他のSO読者に）

Updated Fiddle

注： "同位体" はクールjs libraryあります。