Question

我正在使用Isotope lib过滤掉项目，但我想知道是否有办法添加复选框以启用类似的多项选择？

我创造了一个小提琴来展示我的位置：

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/

同位素网格复选框选择

1 个答案: