Isotope grid checkbox 선택

Question

Isotope lib를 사용하여 항목을 필터링하고 있지만 선택 상자를 추가하여 mutlple 선택을 활성화 할 수 있는지 궁금합니다.

$(function(){ 

    var $container = $('#container'), 
     $filterLinks = $('#filters a'); 

    $container.isotope({ 
    itemSelector: '.item', 
    filter: '.red' 
    }); 

    $filterLinks.click(function(){ 
    var $this = $(this); 

    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
     return; 
    } 

    $filterLinks.filter('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    // get selector from data-filter attribute 
    selector = $this.data('filter'); 

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


    }); 

}); 

Answer 1

할 수 있습니다 체크 박스에 사이클을 가지고 데이터 필터 속성 :

이 https://jsfiddle.net/arkau0gg/

내 스크립트 파일은 다음과 같다 : 나는에 어딘지 보여주기 위해 바이올린을 만든

확인 된 사람들에게. 이 자바 스크립트처럼 :

$(function(){ 
    var $container = $('#container'), 
     $filterLinks = $("input[type='checkbox']"); 

    $container.isotope({ 
    itemSelector: '.item', 
    filter: '.red' 
    }); 

    $filterLinks.change(function(){ 
    var selector= ''; 
    $filterLinks.each(function(){ 
     if($(this).prop('checked')){ 
     if(selector != '') selector += ','; 
     selector += $(this).data('filter'); 
     } 
    }); 

    if(selector){ 
     $container.isotope({ 
     filter: selector 
     }); 
    } 


    }); 

}); 

여기보십시오 : https://jsfiddle.net/rbkctham/