显示返回结果计数的函数是'没有按预期工作

Function to display returned results count isn't working as expected

本文关键字：工作 结果 返回 函数 显示      更新时间：2023-09-26

我的jQuery复选框过滤器工作正常：

http://jsfiddle.net/EducateYourself/Lmehmj26/3/

在复选框形式下，我想显示结果的数量。默认情况下为7。

当我过滤结果时，它不会显示正确数量的显示结果。

你能帮我找出我的错误吗？

我评论了jsfiddle代码中添加变量n以获得我想要的结果的行。

$('.category').on('change', function () {
    var n; //declare variable n
    var category_list = [];
    $('#filters :input:checked').each(function () {
        var category = $(this).val();
        category_list.push(category);
    });
    if (category_list.length == 0) {
        $('.resultblock').show();
    } else {
        $('.resultblock').hide();
        });
        $('#count').text(n); // change the results qunatity
    }
});

问题是，如果单个元素包含多个匹配标记，则会将n多次递增。

对于每个元素，最多只能增加n一次：

更新示例

$('.resultblock').each(function() {
  var item = $(this).data('tag'),
    itemArray = item.split(' '),
    hasTag = false;
  for (var i = 0; i < category_list.length; ++i) {
    if (itemArray.indexOf(category_list[i]) >= 0) {
      hasTag = true;
    }
  }
  if (hasTag) {
    $(this).show();
    n++; // Only increment n once, at most, for each element.
  }
});

这里有一个更干净、简化的代码版本：

更新示例

$('.category').on('change', function() {
  var categoryList = $('#filters :input:checked').map(function() {
    return this.value;
  }).get();
  var count = 0;
  $('.resultblock').hide().each(function() {
    var itemTagsArray = $(this).data('tag').split(' ');
    var hasTag = false;
    categoryList.forEach(function(tag) {
      if (itemTagsArray.indexOf(tag) > -1) {
        hasTag = true;
      }
    });
    if (hasTag) {
      $(this).show();
      count++;
    }
  });
  $('#count').text(count);
});

您正在计算双打，一个非常简单的解决方案是在for循环中添加可见性检查，就像一样

for (i = 0; i < category_list.length; ++i) {
    if (itemArray.indexOf(category_list[i]) >= 0 && !$(self).is(":visible")) {
        $(self).show();
        n=n+1; //increase the value of n if found a result
    }
}

如图所示，这是的工作原理

作为旁注，当您选中一个或多个复选框，然后全部取消选中时，编号会中断。为了防止这种情况，如果有任何复选框被选中到，你应该更改你的复选框

if (category_list.length == 0) {
        $('.resultblock').show();
        $('#count').text($('.resultblock').length);
    }
相关文章：