[英]Function to display returned results count isn't working as expected
我的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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.