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

Question

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

我有两个复选框过滤器列表，其中每个列表都有一个清除列表按钮，用于取消选中列表中的复选框和一个清除所有按钮，用于取消选中所有复选框并执行同位素（{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') 中唯一缺少的是 "reset" 过滤器数组...并且 "repopulate" 它可能另一个复选框列表的值。

// 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 以通过避免冗余代码来简化脚本。
我用获取复选框值的部分制作了一个 "sub-function"。
;)

Updated Fiddle

其他 SO 读者注意："isotope" 很酷 js library。

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

Isotope filtering using checkboxes issue

javascript

jquery

jquery-isotope