Question

我试图让过滤同位素解决问题但是我被卡住了。

我有两个复选框过滤器列表，其中每个列表都有一个清单列表按钮，以取消选中列表中的复选框和一个清除所有复选框并执行同位素清除按钮（{filter：＆＃39; *＆＃39;}）点击后，这是所需的。

我的问题是，当单击清除列表按钮时，我无法弄清楚如何使清单列表按钮与网格容器同位素。逻辑上，网格容器必须是同位素而没有特定列表的值。当使用清单按钮清除所有列表时，网格应该是同位素（{filter：＆＃39; *＆＃39;}）

这是我的js代码

function initIsotope(){

  var $wrapper = $('.wrapper');

  if($wrapper.length < 1){
    return;
  }

    var $filters = $('.filters', $wrapper);
  var $grid = $('.grid-container', $wrapper);
  var $checkboxList = $ ('.checkbox-list', $wrapper);
  var $checkboxes = $('.checkbox-control', $wrapper);
  var $clearList = $('.clear-list', $wrapper);
  var $clearAll= $('.clear-all', $wrapper);

  //init Isotope
  $grid.isotope({

      itemSelector: '.grid-item',
        layoutMode: 'fitRows'

  });

  //isotope filtering on checkbox click
  // this part of code is from http://jsfiddle.net/desandro/DQydj/
   $checkboxes.change(function(){

    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });

    filters = filters.join(', ');
    $grid.isotope({ filter: filters });
  });



  //clear list
  $clearList.on('click', function(e){

    e.preventDefault();

    var $self = $(this);

    $self.closest($checkboxList).find($checkboxes).prop("checked", false);

    //Im stuck here

  });




  //clear-all lists
  $clearAll.on('click',function(e){

    e.preventDefault();
    $checkboxes.prop("checked", false);

    $grid.isotope({ filter: '*' });

  });



}



$(function(){
     initIsotope();
});

有jsfiddle示例供您查看： https://jsfiddle.net/timosergio/at7gtc1g/35/

你可以帮帮我吗？

PS：我已经更新了我的jsFiddle，我更接近于渴望的结果。如果你介意的话，请查看

Answer 1

在$clearList.on('click')清除正确closest($checkboxList)之后，// Empty filter array var filters = []; // get checked checkboxes values $checkboxes.filter(':checked').each(function(){ filters.push( this.value ); }); filters = filters.join(', '); $grid.isotope({ filter: filters });中唯一缺少的是“重置”过滤器数组......并使用其他复选框的可能值“重新填充”它 - 列表。

$checkboxes.change

就像你在函数$clearAll.on('click')中所做的那样...... 您将值数组发送到grid.isotope以用作过滤器。

你已经在'*'中做了正确的事您正在发送func1。

修改
我刚刚更新了我的小提琴，通过避免冗余代码来简化脚本我使用获取复选框值的部分创建了一个“子功能” ;）

Updated Fiddle

注意其他SO读者：“同位素”是一个很酷的js library。

使用复选框进行同位素过滤问题

1 个答案: