Isotope로 필터링하기위한 요소 결합하기

Question

현재 Isotope를 사용하여 발행물 목록을 필터링하고 있지만 문서의 두 번째 링크 목록은 표준 목록 화 된 링크 필터 메서드와 select 요소를 결합 할 수 있기를 원합니다. 꽤 긴.

내가 하나의 옵션 배열에 요소의 두 가지 유형과 결합 선택된 값에 대해 다루고과 사투를 벌인거야 비트. 필터를 서로 독립적으로 작동하도록 만들 수 있지만 (아래 코드) 함께 작동해야합니다. 두 개의 다른 동작 (클릭 또는 변경)과 두 개의 속성 (클래스 = 또는 값 =)을 하나의 옵션 배열로 결합하여 isotop 필터로 전달하는 방법은 무엇입니까?

var $container = $('#library'); 
// select ccskills publications by default 
$container.isotope({ filter: '.ccskills' }); 

var $optionSets = $('#library-options .option-set'), 
$optionLinks = $optionSets.find('a'); 

$optionLinks.click(function(){ 
    var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
    return false; 
    } 
    var $optionSet = $this.parents('.option-set'); 
    $optionSet.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    // make option object dynamically, i.e. { filter: '.my-filter-class' } 
    var options = {}, 
    key = $optionSet.attr('data-option-key'), 
    value = $this.attr('data-option-value'); 

    // parse 'false' as false boolean 
    value = value === 'false' ? false : value; 
    options[ key ] = value; 
    $container.isotope(options); 
    return false; 
}); 

    // using the 'chozen' plugin to style my select element 
$(".chzn-select").chosen().change(
    function() { 
     var industry = $("option:selected", this).val(); 
     $container.isotope({filter: industry}); 
    } 
); 

Answer 1

사용자가 보유한 각 필터 유형에 대한 배열 차원이있는 다차원 배열이 필요합니다. 이전에 해본 적이 있고 라이브 데모 예 here이 있습니다!

here을 참조하십시오! js를 위해. 내 JS에서

은 (필터)

function getComboFilter(filters) { 
    var i = 0; 
    var comboFilters = []; 
    var message = []; 
    for (var prop in filters) { 
     message.push(filters[ prop ].join(' ')); 
     var filterGroup = filters[ prop ]; 
     // skip to next filter group if it doesn't have any values 
     if (!filterGroup.length) { 
      continue; 
     } 
     if (i === 0) { 
      // copy to new array 
      comboFilters = filterGroup.slice(0); 
     } 
     else { 
      var filterSelectors = []; 
      // copy to fresh array 
      var groupCombo = comboFilters.slice(0); // [ A, B ] 
      // merge filter Groups 
      for (var k=0, len3 = filterGroup.length; k < len3; k++) { 
       for (var j=0, len2 = groupCombo.length; j < len2; j++) { 
        filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ] 
       } 
      } 
      // apply filter selectors to combo filters for next group 
      comboFilters = filterSelectors; 
     } 
     i++; 
    } 
    comboFilters.sort(); 
    var comboFilter = comboFilters.join(', '); 
    return comboFilter; 
} 

이 기능은 밀어 접합을 모두 처리하고 사용하지만 필터 배열의 다양한 세트의 분류 최종 기능이라고 getComboFilters에 관심이있을 수 있습니다 파일

$container.isotope({ filter: '.ccskills' }); 

이상 : :

당신이 필터 방식이 별도 번 호출하는 것 때문에 당신이 잘 나는 일상적인 말을하지만 정말 루틴 ... 필터 루틴에 추가해야

$container.isotope({filter: .industry}); 

모든 필터 유형을 함께 사용하면 모든 필터 유형이 서로에 대해 알아야 할 것입니다. 즉, 동일한 자바 스크립트 인클로저에 있어야하며 필터 메소드는 호출 만하면됩니다. 한번은 모든 필터 유형 조건에 대해 테스트됩니다.

var $container = $('#library'); 
var comboFilter = getComboFilter(filters); 
$container.isotope({ filter: comboFilter }); 

// This next part targets all the possible filter items 
// i.e. '.option-set a' just like your example 

$('.option-set a').click(function(){ 
     // exit directly if filter already disabled 
     if ($(this).hasClass('disabled')){ 
      return false; 
     } 
     var $this = $(this); 
     var $optionSet = $(this).parents('.option-set'); 
     group = $optionSet.attr('data-filter-group'); 
     // store filter value in object 
     var filterGroup = filters[ group ]; 
     if (!filterGroup) { 
      filterGroup = filters[ group ] = []; 
     } 
     var comboFilter = getComboFilter(filters); 
     $container.isotope({ filter: comboFilter }); 
}); 
function getComboFilter(filters) { 
    var i = 0; 
    var comboFilters = []; 
    var message = []; 
    for (var prop in filters) { 
     message.push(filters[ prop ].join(' ')); 
     var filterGroup = filters[ prop ]; 
     // skip to next filter group if it doesn't have any values 
     if (!filterGroup.length) { 
      continue; 
     } 
     if (i === 0) { 
      // copy to new array 
      comboFilters = filterGroup.slice(0); 
     } 
     else { 
      var filterSelectors = []; 
      // copy to fresh array 
      var groupCombo = comboFilters.slice(0); // [ A, B ] 
      // merge filter Groups 
      for (var k=0, len3 = filterGroup.length; k < len3; k++) { 
       for (var j=0, len2 = groupCombo.length; j < len2; j++) { 
        filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ] 
       } 
      } 
      // apply filter selectors to combo filters for next group 
      comboFilters = filterSelectors; 
     } 
     i++; 
    } 
    comboFilters.sort(); 
    var comboFilter = comboFilters.join(', '); 
    return comboFilter; 
} 

희망이 :

var $container = $('#library'); 
var comboFilter = getComboFilter(filters); 
$container.isotope({ filter: comboFilter }); 

마지막으로, 파일에 완전한 통합이 같은 somethign 될 것이다 다음 getComboFilter (필터)를 사용하여

는이 같은 조합 필터 메소드를 호출 기능 누군가를 돕는다! 데모는 꽤 매끄럽다.