我一直在努力尝试使用多个复选框值并比较div(li项目)中的innerHTML项目。我让过滤器在某些时候工作,但不是所有的时间。下面是我到目前为止实例化的代码。我已经仔细检查以确保从复选框项目收集的值成功传递到下面的函数。我正在寻找的是如何确定数组中的所有项目(2个或更多)是否在特定div(多个)中找到,然后显示,否则隐藏(display:none)。我已经搜遍了一个很好的答案。让我的头脑缠绕在更高级的jQuery上。
我有一个坚实的开始,只是尝试简化,但也为这些项目执行适当的过滤器。我有超过35个复选框值来比较li的14个div中的内容。
谢谢大家!!希望我能尽快帮助其他人!
function hideShowItems(selectedVals) {
var availableSpecs = [];
var totalMatches = 0;
console.log(selectedVals);
$('.this-div').each(function() {
$(this).css('display', "none");
for(var i=0; i<selectedVals.length; i++) {
if($(this).children('li:contains('+selectedVals[i]+')')) {
console.log($(this).attr('id'));
totalMatches++
if(totalMatches == selectedVals.length) {
(jQuery('.spec:contains('+selectedVals[i]+')')).closest('div.this-div').css("display", "inline-block");
totalMatches = 0;
} else {
$(this).css("display", "none");
}
}
}
if($(this).css('display') == "inline-block") {
$(this).find('.spec').each(function() {
availableSpecs.push(this.innerText);
});
}
});
sortThroughSpecs(availableSpecs);
}
解决:
function hideShowItems(selectedVals) {
var availableSpecs = [];
var totalMatches = 0;
$('.this-div').each(function() {
$(this).find('.spec').each(function() {
for(var i=0; i<selectedVals.length; i++) {
if(this.innerText == selectedVals[i]) {
totalMatches++;
}
}
})
if(totalMatches == selectedVals.length) {
$(this).css("display", "inline-block");
$(this).find('.spec').each(function() {
availableSpecs.push(this.innerText);
});
} else {
$(this).css("display", "none");
}
totalMatches = 0;
});
sortThroughSpecs(availableSpecs);
}