jquery-isotope - ページ上にアイソトープの複数のインスタンスがありますか?

Question

1 つのページで Isotope を複数回使用することはできますか?つまり、異なるデータ セットに対して異なるファイラー セットを使用することはできますか?

コードでは、変更できない「#options」などの特定の ID を使用する必要があるようです。

これを実現するには、コードにどのような変更を加える必要がありますか?

Answer 1

可能です。必要に応じて個別に初期化するだけです。例えば：

<div class='setA'>
 <div class='itemA' data-title='xxx'>xxx</div>
 <div class='itemA' data-title='xxx'>xxx</div>
</div>
<div class='setA second'>
 <div class='itemA' data-title='xxx'>xxx</div>
 <div class='itemA' data-title='xxx'>xxx</div>
</div>
<div class='setB'>
 <div class='itemB' data-points='xxx'>xxx</div>
 <div class='itemB' data-points='xxx'>xxx</div>
</div>

<script>
$('.setA').isotope({
    itemSelector: '.itemA',
    getSortData: {
        alphabetical: function( item ) {
            return item.attr('data-title');
        }, 
        somethingelse: function( item ) {}
    }
});
$('.setB').isotope({
    itemSelector: '.itemB',
    getSortData: {
        points: function( item ) {
            return parseInt(item.attr('data-points'));
        }, 
        somethingelse: function( item ) {}
    }
});
</script>