过滤总和 items/images

Question

我有一个使用 Shuffle.js 的带有复选框的过滤器，在过滤之后想 count/sum 使用过滤的项目 .length() 过滤项目，并用这个值更新 div。由于我没有得到计算错误的原因。这是我正在尝试的：

 var _checkbox = $(".buttons input");
     _checkbox.on('change', function(){
     
        var countThis = $(this).val(),
            total = 0;
        $('input:checkbox:checked').each(function(){ 
            var shuffleItems = $('.image[data-gallery="'+countThis+'"]').length;
            total += isNaN(parseInt(shuffleItems)) ? 0 : parseInt(shuffleItems);
            //total += shuffleItems;
           // total = parseInt(total) + (parseInt(shuffleItems) || 0);
        });

       console.log(total);
      $('.nr-filtered').text(total);
    });

在这里写下更多细节：(https://codepen.io/testeristesting/pen/oNeaZYm)

谢谢，

Answer 1

这可能与过滤的工作方式有关，您没有检查元素的 visibility。

这是一种略有不同的方法，看起来显示的是正确的数字。

首先 - 获取所有选中值的列表。然后计算所有 .image 个可见的元素，其 gallery 值包含在选中的值中。

  var total = 0;
  var checks = $('input:checked').toArray().map((el) => $(el).val());
  var numShowing = $('.image[data-gallery]:visible').toArray().filter((el) => {
    var val = $(el).data('gallery');
    return checks.includes(val);
  }).length

  $('.nr-filtered').text(numShowing);

过滤总和 items/images

Sum filtered items/images

checkbox

jquery