顯示返回結果計數的功能無法正常工作

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 ：

更新示例

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

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

如該小提琴所示，該方法有效

附帶說明，當您選中一個或多個復選框然后取消全選時，編號會中斷。 為防止這種情況，您應該更改是否選中了任何復選框以選中

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