jQueryの複数のフィルタ

Question

私はアイテムの簡単なリストにフィルタリングを提供するためにhttp://mixitup.io/ライブラリを使用しています。 1つのことを除いて、すべてうまく動作します。必要な複数レベルのフィルタ。

私は2つのタイプのフィルタリングを持っています.1つは「タイプ」、もう1つは「メーカー」です。ですから、 "manufacturer1"の "typeA"や他の組み合わせを表示したいとしましょう。項目は、リストに表示される項目の両方を満たす必要があります。

フィルタをクリックすると、すべてのメーカーを含む「typeA」、または複数のタイプを表示する「manufacturerA」のみ表示できますが、それは私が望むものではありません。

私はここに今持っているコードとjsfiddle含まれている次のように項目リストがある

<div id="filter"> 
    <span>Type</span> 
    <ul class="filter-list"> 
     <li data-filter="lemon" class="filter" data-dimension="type"><a href="#">Lemon</a></li> 
     <li data-filter="orange" class="filter" data-dimension="type"><a href="#">Orange</a></li> 
     <li data-filter="apple" class="filter" data-dimension="type"><a href="#">Apple</a></li> 
    </ul> 


    <span>Manufacturer</span> 
    <ul class="filter-list"> 
     <li data-filter="1" class="filter" data-dimension="manufacturer"><a href="#">1</a></li> 
     <li data-filter="2" class="filter" data-dimension="manufacturer"><a href="#">2</a></li> 
    </ul> 
</div> 

：

<ul id="grid"> 
    <li class="mix lemon small"> 
     <h3> small Lemon</h3> 
     <p>Some text here</p> 
    </li> 
    <li class="mix orange small"> 
     <h3>small Orange</h3> 
     <p>Some text here</p> 
    </li> 
    <li class="mix apple medium"> 
     <h3>medium Apple</h3> 
     <p>Some text here</p> 
    </li> 
    <li class="mix lemon big"> 
     <h3>big Lemon</h3> 
     <p>Some text here</p> 
    </li> 
    <li class="mix orange medium"> 
     <h3>medium Orange</h3> 
     <p>Some text here</p> 
    </li> 
    <li class="mix apple big"> 
     <h3>big Apple</h3> 
     <p>Some text here</p> 
    </li> 
</ul> 

フィルタの場合 http://jsfiddle.net/QtQnB/62/

を、私はこれを使用しました

そして、単純なjsコードを使用して、mixitupを初期化し、最初の項目を読み込み、最後の行が動作していない複数のカテゴリに対してフィルタを適用します。

$('#grid').mixitup({ 
    showOnLoad: "2 orange", 
    filterLogic : 'and'}); 

var $filters = $('.filter-list').find('li'), dimensions = {type: 'orange', manufacturer: '2' }; 


$filters.on('click',function(){ 
var $t = $(this), 
    dimension = $t.attr('data-dimension'), 
    filter = $t.attr('data-filter'); 
    console.info("dimension: "+dimension); 
    console.info("filter "+filter); 
    console.info("current filter for this cat: "+dimensions[dimension]); 
    dimensions[dimension] = filter; 
    console.info("selected filter for this cat: "+dimensions[dimension]); 
    console.info("type: "+ dimensions['type']); 
    console.info("manufacturer: "+ dimensions['manufacturer']); 
    var filterString = dimensions['type'] + " " + dimensions['manufacturer']; 



$('#grid').mixitup('filter',filterString); 
}); 

私は他の質問やライブラリの提供例を見てきましたが、これはうまく動作しません。

ありがとうございました

Answer 1

あなたの責任ではありません。把握するには1時間かかりましたが、最初に削除する必要があるクリックイベントが存在することが判明しました。彼らの例がなぜそれを示していないのか分かりません。

var $filters...行の後に$filters.unbind('click');を追加すると、それが動作します。

jsFiddle