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

Isotope filtering using checkboxes issue

本文关键字：过滤 问题 同位素 复选框      更新时间：2023-09-26

我正在尝试过滤同位素以解决问题，但我被卡住了。

我有两个复选框过滤器列表，其中每个列表都有一个清除列表按钮，以便取消选中其列表中的复选框和一个清除所有按钮，该按钮取消选中所有复选框并在单击时执行同位素（{过滤器：'*' }），这是需要的。

我的问题是，当单击清除列表按钮时，我无法弄清楚如何制作清除列表按钮来同位素网格容器。从逻辑上讲，网格容器必须在没有特定列表值的情况下同位素。当使用清除列表按钮清除所有列表时，网格应同位素（{过滤器："*"}）

这是我的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，我更接近但想要的结果。如果您介意，请查看一下

清除

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

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

更新的小提琴



其他SO读者注意："同位素"是一个很酷的js库。

相关文章：