同位素网格复选框选择

Question

我正在使用 Isotope 库来过滤项目，但我想知道是否有一种方法可以添加复选框来启用类似的多重选择？

我创建了一个 fiddle 来展示我所在的位置：

我的脚本文件如下所示：

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

同位素网格复选框选择

Isotope grid checkbox selection

jquery

filter

jquery-isotope