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

Question

我正在尝试使过滤同位素工作，但我被卡住了。

我有两个复选框过滤器列表，其中每个列表都有一个清除列表按钮，以便取消选中其列表中的复选框，还有一个清除所有按钮，取消选中所有复选框并执行 isotope({filter: ' *' }) 单击时，这是所需的。

我的问题是，当单击清除列表按钮时，我无法弄清楚如何使清除列表按钮与网格容器同位素。 从逻辑上讲，网格容器的同位素必须没有特定列表的值。 当使用清除列表按钮清除所有列表时，网格应该是 isotope({ filter: '*' })

这是我的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

在清除正确的closest($checkboxList) 后，您的$clearList.on('click') 中唯一缺少的是“重置”过滤器数组...并使用另一个复选框列表的可能值“重新填充”它。

// 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中所做的那样...
您将值数组发送到 grid.isotope 以用作过滤器。

你已经在$clearAll.on('click')做正确的事了
您正在发送'*'。

编辑
我刚刚更新了我的小提琴以通过避免冗余代码来简化脚本。
我用获取复选框值的部分制作了一个“子功能”。
;)

Updated Fiddle

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