javascript - 显示返回结果计数的功能未按预期工作

Question

我的 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
    }
});

Answer 1

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

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

Updated Example

$('.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.
  }
});

这是一个更清晰、简化的代码版本:

Updated Example

$('.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);
});