Mehrere Filter in jQuery

Question

Ich verwende http://mixitup.io/ Bibliothek, um Filter für meine einfache Liste von Elementen bereitzustellen. Alles funktioniert gut, bis auf eins: mehrere Level-Filter, die ich brauche.

Ich habe zwei Arten der Filterung, eine basiert auf "Typ" und eine auf "Hersteller". Nehmen wir an, ich möchte "typeA" von "manufacturer1" oder einer anderen Kombination anzeigen. Elemente müssen beide erfüllen, um auf der Liste angezeigt zu werden.

Ich kann das nicht funktionieren, und wenn ich auf die Filter klicke, kann ich nur "typeA" anzeigen, was alle Hersteller einschließt, oder "manufacturerA", das mehrere Typen anzeigt, aber das will ich nicht .

ich die jsfiddle mit dem Code enthalten sind, habe ich jetzt hier: http://jsfiddle.net/QtQnB/62/

Für die Filter, habe ich dies:

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

Die Artikelliste wird wie folgt:

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

Und dann der einfache Js-Code, um das Mixitup zu initialisieren, initiale Elemente zu laden und zu versuchen, den Filter für mehrere Kategorien mit der letzten Zeile anzuwenden, die nicht funktioniert:

Ich schaute auf andere Fragen, und ein Beispiel, das sie mit der Bibliothek zur Verfügung gestellt haben, aber ich kann einfach nicht, dass dies funktioniert.

Danke

Answer 1

Es ist nicht deine Schuld! Es hat eine Stunde gedauert, bis ich herausgefunden habe, dass es jedoch Klickereignisse gibt, die Sie zuerst entfernen müssen. Ich weiß nicht, warum ihre Beispiele es nicht zeigen.

Wenn Sie $filters.unbind('click'); nach Ihrer var $filters... Zeile hinzufügen, wird es funktionieren.

jsFiddle