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

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')
中做了正确的事情您正在发送'*'。

编辑
我刚刚更新了我的 fiddle ，通过避免冗余代码来简化脚本。
我用获取复选框值的部分创建了一个“子函数”。
;)

Updated Fiddle

其他 SO 读者请注意:“同位素”很酷 js library .