页面上有多个同位素实例？

Question

是否可以在页面上多次使用同位素，即对于不同的数据集使用不同的文件集？

看来代码需要使用某些id，比如“#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>