查詢同位素過濾器添加選定的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; 


});