在同位素中初始化過濾項目

Question

我有一個同位素插件（jQuery）的問題。我想用已經過濾的項目初始化插件。我在這個主題上看過一些帖子，但答案並不明確。

這是我的代碼：

<div class="filters"> 
    <div class="ui-group"> 
    <div class="button-group js-radio-button-group" data-filter-group="gender"> 
     <button class="button is-checked" data-filter="">BOTH</button> 
     <button class="button" data-filter=".female">FEMALE</button> 
     <button class="button" data-filter=".male">MALE</button> 
    </div> 
    </div> 
</div> 

這是我的項目：

<div class="grid"> 
    <div class="colar-shape female">1</div> 
    <div class="colar-shape male">2</div> 
    <div class="colar-shape female">3</div> 
    <div class="colar-shape male">4</div> 
    <div class="colar-shape female">5</div> 
</div> 

最後，初始化代碼在JS：

$(document).ready(function() { 
    // init Isotope 
    var $grid = $('.grid').isotope({ 
    itemSelector: '.color-shape', 
    layoutMode: 'fitRows' 
    }); 

    // store filter for each group 
    var filters = {}; 

    $('.filters').on('click', '.button', function() { 
    var $this = $(this); 
    // get group key 
    var $buttonGroup = $this.parents('.button-group'); 
    var filterGroup = $buttonGroup.attr('data-filter-group'); 
    // set filter for group 
    filters[ filterGroup ] = $this.attr('data-filter'); 
    // combine filters 
    var filterValue = concatValues(filters); 
    // set filter for Isotope 
    $grid.isotope({ filter: filterValue }); 
    }); 

    // change is-checked class on buttons 
    $('.button-group').each(function(i, buttonGroup) { 
    var $buttonGroup = $(buttonGroup); 
    $buttonGroup.on('click', 'button', function() { 
     $buttonGroup.find('.is-checked').removeClass('is-checked'); 
     $(this).addClass('is-checked'); 
    }); 
    }); 

}); 

// flatten object by concatting values 
function concatValues(obj) { 
    var value = ''; 
    for (var prop in obj) { 
    value += obj[ prop ]; 
    } 
    return value; 
} 

那麼，如何加載的div 1,3和5加載頁面時？

非常感謝！

Answer 1

這應該工作：

// init Isotope 
var $grid = $('.grid').isotope({ 
itemSelector: '.color-shape', 
layoutMode: 'fitRows', 
filter: '.female' 
});