使用Shuffle.js实现复选框筛选时统计筛选条目数计算错误如何解决

问题核心原因 #

你的代码存在两处关键逻辑错误：

• 变量作用域错误：你在each遍历外部声明的countThis，取值是触发本次change事件的单个复选框的值，遍历所有选中复选框的过程中全程复用了这个固定值，根本没有读取每个被选中复选框对应的分类值，导致统计逻辑完全错误。
• 冗余类型转换：jQuery选择器返回的.length本身就是数字类型，不需要额外做parseInt转换和非数字判断，冗余逻辑没有实际作用。

修复方案 #

方案1：修复原有遍历逻辑 #

仅调整取值位置，在each循环内部读取当前遍历到的选中复选框的值即可：

var _checkbox = $(".buttons input");
_checkbox.on('change', function(){
  var total = 0;
  // 遍历所有选中的复选框
  $('input:checkbox:checked').each(function(){ 
    // 在循环内部取当前被遍历复选框的val，而不是用外部触发事件的复选框val
    var currentCategory = $(this).val();
    var shuffleItems = $('.image[data-gallery="'+currentCategory+'"]').length;
    total += shuffleItems;
  });
  console.log(total);
  $('.nr-filtered').text(total);
});

方案2：直接调用Shuffle.js原生API（更推荐） #

Shuffle.js实例自带可见元素统计属性，不需要手动查DOM，统计结果和实际展示效果完全一致，不会出现DOM状态和Shuffle内部状态不同步的问题：
假设你初始化Shuffle的代码类似：

// 初始化时保存Shuffle实例
const myShuffle = new Shuffle(document.querySelector('.grid'), {
  itemSelector: '.image',
  // 其他配置
});

统计时直接读取实例属性即可：

_checkbox.on('change', function(){
  // 直接取Shuffle内部统计的可见元素数量，结果100%准确
  const total = myShuffle.visibleItems.length;
  $('.nr-filtered').text(total);
});

内容的提问来源于stack exchange，提问作者GMedija