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; 
     }); 
    }); 
});