jQuery의 다중 필터

Question

http://mixitup.io/ 라이브러리를 사용하여 간단한 항목 목록 필터링을 제공합니다. 한 가지를 제외하고 모든 것이 잘 작동합니다. 필요한 여러 수준 필터.

필자에게는 두 가지 유형의 필터링이 있습니다. 하나는 "유형"을, 다른 하나는 "제조업체"입니다. 그래서, "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> 

항목 목록은 다음과 같다 : 필터에 대한 http://jsfiddle.net/QtQnB/62/

,이 사용

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

그리고 간단한 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

네 잘못이 아니야! 알아내는 데는 시간이 걸렸지 만 먼저 제거해야하는 기존의 클릭 이벤트가있는 것으로 나타났습니다. 나는 그들의 예가 그것을 보여주지 않는 이유를 모른다.

var $filters... 행 뒤에 $filters.unbind('click');을 추가하면 작동합니다.

jsFiddle