jQuery Isotope - 동일한 페이지에 여러 인스턴스가 있습니다.

Question

저는 동위 원소 플러그인을 jQuery 용으로 작업 해 왔으며 두 개의 동위 원소 인스턴스가 필요한 몇 가지 문제가있었습니다.

둘 다 다른 유형의 항목을 가지고 있고 자신의 용기에 보관,하지만 난 동위 원소의 두 번째 인스턴스에 필터를 클릭하면 너무하고 하지 그 반대의 첫 번째 인스턴스를 필터링하려고 시도합니다.

내가 물어 보는 것은 서로 간섭을 일으키지 않고 페이지에 동위 원소의 두 인스턴스를 가질 수 있다면 문제없이이 작업을 수행하는 가장 좋은 방법은 무엇일까요?

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