Più filtri in jQuery

Question

Sto utilizzando la libreria http://mixitup.io/ per fornire il filtro per il mio semplice elenco di elementi. Tutto funziona bene, tranne una cosa: filtri a più livelli di cui ho bisogno.

Ho due tipi di filtri, uno è basato su "tipo" e uno su "produttore". Quindi, diciamo che voglio mostrare "typeA" da "manufacturer1", o qualche altra combinazione. Gli articoli dovrebbero soddisfare entrambi quelli da mostrare sulla lista.

Non riesco a farlo funzionare, e dopo aver fatto clic sui filtri, posso mostrare solo "typeA", che includerà tutti i produttori, o "manufacturerA", che mostra più tipi, ma non è quello che voglio .

Ho compreso il jsfiddle con il codice che ho adesso qui: http://jsfiddle.net/QtQnB/62/

Per i filtri, ho usato questo:

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

La lista voce è la seguente:

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

E poi il semplice codice js per inizializzare il mixitup, caricare gli elementi iniziali e provare ad applicare il filtro per più categorie con l'ultima riga, che non funziona:

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

Ho esaminato altre domande e un esempio hanno fornito la libreria, ma semplicemente non riesco a farlo funzionare.

Grazie

Answer 1

Non è colpa tua! Mi ci è voluta un'ora per capire, ma si scopre che ci sono eventi di clic esistenti che devi rimuovere per primi. Non so perché i loro esempi non lo mostrano.

Se si aggiunge $filters.unbind('click'); dopo la linea var $filters..., funzionerà.

jsFiddle