Выбор сетки изотопов

Question

Я использую Isotope lib, чтобы отфильтровать элементы, но мне было интересно, есть ли способ добавить флажки, чтобы включить такие же мутные выборки?

Я создал скрипку, чтобы продемонстрировать, где я нахожусь:

https://jsfiddle.net/arkau0gg/

My Scripts файл выглядит следующим образом:

$(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

Вы можете атрибут цикл на флажках и принимать данные фильтра для проверяемых. Как это JavaScript:

$(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/