쿼리 동위 원소 필터 선택한 CSS를 추가

Question

나는 이것에 대한 답변을 찾으려고 노력, 그것은 아마도 간단합니다. 선택한 클래스를 동위 원소의 활성 필터에 추가하려고합니다.

$(function(){ 

    var $container = $('#container'); 

    $container.isotope({ 
    itemSelector: '.item', 
    masonry : { 
     columnWidth : 165 
    } 
    }); 


    // filter items when filter link is clicked 
    $('#filters a').click(function(){ 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector, animationEngine : "css" }); 
    return false; 


    }); 

내 HTML은 다음과 같습니다 :

<ul id="filters" > 
    <li><a href="#" data-filter="*" class="selected">All</a></li> 
    <li><a href="#" data-filter=".Henry">Henry</a></li> 
    <li><a href="#" data-filter=".William">South William</a></li> 
    <li><a href="#" data-filter=".Grafton">Grafton</a></li> 
    <li><a href="#" data-filter=".Talbot">Talbot</a></li> 
</ul> 

누구든지 도와 줘요 여기 내 코드는? 감사 데이브

Answer 1

이 시도 filter:.pre-selected class

$container.isotope({ 
    itemSelector: '.item', 
    filter: '.Grafton', 
    masonry : { 
     columnWidth : 165 
    } 
}); 

Answer 2

으로 미리 선택하려는 필터 추가 :

/ filter items when filter link is clicked 
$('#filters a').click(function(){ 
$('#filters a.active').removeClass('active'); 
var selector = $(this).attr('data-filter'); 
$container.isotope({ filter: selector, animationEngine : "css" }); 
$(this).addClass('active'); 
return false; 


}); 

을