jQuery同位素 - 同一页面上的多个实例

Question

我一直在使用jQuery的Isotope插件，我遇到了一些需要两个同位素实例的主页的问题。

他们都有不同类型的项目，它们都保存在自己的容器，但是当我点击同位素的第二个实例的过滤器会尝试过和不反之亦然过滤第一个实例。

我在问的是，如果有可能在页面上有两个同位素实例，而不干扰彼此，如果是的话，什么是最好的方式来完成这个没有问题？

Answer 1

要回答你的问题，是的，可以在两个同位素实例上运行两个不同的过滤器。我为你演示了一个示例小提琴。

Fiddle

编辑：做了一些代码的造型和JSLint的东西

这里是一些JS：

$(function() { 
    "use strict"; 

    //Define your containers and option sets 
    var $container = [$('#container'), $('#container-new')], $optionSets = [$('#options .option-set'), $('#options-new .option-set')]; 

    //Initialize isotope on each container 
    jQuery.each($container, function (j) { 
     this.isotope({ 
      itemSelector : '.element' 
     }); 
    }); 

    //Initialize filter links for each option set 
    jQuery.each($optionSets, function (index, object) { 

     var $optionLinks = object.find('a'); 

     $optionLinks.click(function() { 
      var $this = $(this), $optionSet = $this.parents('.option-set'), options = {}, 
       key = $optionSet.attr('data-option-key'), 
       value = $this.attr('data-option-value'); 
      // don't proceed if already selected 
      if ($this.hasClass('selected')) { 
       return false; 
      } 

      $optionSet.find('.selected').removeClass('selected'); 
      $this.addClass('selected'); 

      // make option object dynamically, i.e. { filter: '.my-filter-class' } 

      // parse 'false' as false boolean 
      value = value === 'false' ? false : value; 
      options[key] = value; 
      if (key === 'layoutMode' && typeof changeLayoutMode === 'function') { 
       // changes in layout modes need extra logic 
       changeLayoutMode($this, options); 
      } else { 
       // otherwise, apply new options 

       $container[index].isotope(options); 
      } 

      return false; 
     }); 
    }); 
});