同位素网格复选框选择

Question

我正在使用 Isotope 库来过滤掉项目，但我想知道是否有办法添加复选框来启用多重选择？

我创建了一个小提琴来展示我在哪里：

https://jsfiddle.net/arkau0gg/

我的脚本文件如下所示：

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

您可以在复选框上循环并为选中的复选框设置 data-filter 属性。 像这样的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/