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

Answer 2

你在计算双打，一个非常简单的解决办法是在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
    }
}

如此fiddle所示，该作品

作为旁注，当您选择一个或多个复选框然后取消全选时，您的编号会中断。为防止这种情况发生，您应该更改支票，如果已选中任何复选框

if (category_list.length == 0) {
        $('.resultblock').show();
        $('#count').text($('.resultblock').length);
    }

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

2 个答案: