jQuery

Question

için farklı filtreler Basit öğe listeme göre filtreleme sağlamak için http://mixitup.io/ kütüphanesini kullanıyorum. Her şey iyi çalışıyor, tek bir şey hariç: İhtiyacım olan çoklu seviye filtreler.

İki tip filtreleme var, biri "type" ve bir tanesi "manufacturer" üzerinde. Yani, "manufacturer1" den "typeA" ya da başka bir kombinasyon göstermek istediğimi söyleyelim. Öğelerin listede gösterileceklerin her ikisini de tatmin etmesi gerekir.

Çalışmak için bunu alamıyorum ve filtrelere tıkladıktan sonra, yalnızca "typeA" gösterebilirim. Bu, tüm üreticilerin veya "manufacturerA" nın birden fazla türde görünmesini içerir, ancak istediğim gibi değil .

Ben şimdi burada var kodu ile jsfiddle dahil ettik:

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

öğe listesi aşağıdaki gibidir: filtreler için http://jsfiddle.net/QtQnB/62/

, bunu kullandım

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

Ve sonra basit js kodu mixitup başlatmak için, ilk öğeleri yüklemek ve çalışmayan son satırı, birden fazla kategoriye filtre uygulamak için deneyin:

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

Diğer sorulara ve kütüphaneyle birlikte verdikleri örneklere baktım, ancak bunu işe yaratamam.

Teşekkürler

Answer 1

Bu sizin hatanız değil! Anlamak bana bir saat sürdü, ancak önce kaldırmanız gereken mevcut tıklama etkinliklerinin olduğu ortaya çıkıyor. Örneklerinin neden göstermediğini bilmiyorum.

var $filters... satırınızdan sonra $filters.unbind('click'); eklerseniz, çalışır.

jsFiddle