我有圆形、三 Angular 形、正方形四种颜色,每个形状都有自己的值 我想制作形状、颜色和数值范围的过滤器。 这是过滤器 html 的代码:
<div class="searchColor" id="filterColor">
Color: <br/>
<input type="checkbox" id="Red" value="Red" />Red <br/>
<input type="checkbox" id="Blue" value="Blue"/>Blue <br/>
<input type="checkbox" id="Green" value="Green"/>Green <br/>
<input type="checkbox" id="Gold" value="Gold"/>Gold <p/>
</div>
<div class="searchColor" id="searchShape">
Shape:<br/>
<div class="paintSelect">
<input type="checkbox" id="triangle" value="triangle" />triangle <br/>
<input type="checkbox" id="circle" value="circle"/>circle <br/>
<input type="checkbox" id="square" value="square"/>square
</div>
</div>
<div class="searchSelectedNumber" id="searchNumber">
Number:<br/>
<input type="checkbox" id="number01" value="1" />10-30
<br/>
<input type="checkbox" id="number02" value="2"/>20-40
</div>
这段代码为JS。
var arrayNumber = [];
var arrayMax = [];
$("div[class='searchSelectedNumber'] input").change(function () {
arrayMax = $("[class^=number]");
for (i=0; i<arrayMax.length; i++){
arrayNumber[i] = arrayMax[i].innerHTML;
}
var firstIntervalStart = 0;
var firstIntervalEnd = 0;
var secondIntervalStart = 0;
var secondIntervalEnd = 0;
if ( $("#searchNumber input:checked").length == 0){
$('.color').show();
} else {
var oneChecked = $("#number01").is(':checked');
var twoChecked = $("#number02").is(':checked');
if (oneChecked) {
firstIntervalStart = 0;
firstIntervalEnd = 30;
if (twoChecked) {
firstIntervalEnd = 40;
}
}
else if (twoChecked) {
firstIntervalStart = 20;
firstIntervalEnd = 40;
}
for (i = 0; i < arrayMax.length; i++) {
if (arrayNumber[i] > firstIntervalStart && arrayNumber[i] <= firstIntervalEnd) {
$($(".color")[i]).show();
} else {
$($(".color")[i]).hide();
}
}
if (secondIntervalStart != 0) {
for (i = 0; i < arrayMax.length; i++) {
if (arrayNumber[i] > secondIntervalStart && arrayNumber[i] <= secondIntervalEnd) {
console.log("secondIntervalStart < arrayPrice[i] <= secondIntervalEnd " + $($(".color")[i]));
$($(".color")[i]).show();
} else {
$($(".color")[i]).hide();
}
}
}
}
});
$("div[class='searchColor'] input").change(function () {
if($("#filterColor input:checked").length == 0 && $("#searchShape input:checked").length == 0
){
$('.color').show();
}else if($("#filterColor input:checked").length == 0 && $("#searchShape input:checked").length > 0){
$('.color').show();
$("#searchShape input:not(:checked)").each(function() {
var k = $(this).val();
$('.' + k).hide();
});
}else if($("#filterColor input:checked").length > 0 && $("#searchShape input:checked").length == 0){
$('.color').show();
$("#filterColor input:not(:checked)").each(function() {
$('.' + $(this).attr('value')).hide();
});
}else{
$('.color').show();
$("#searchShape input:not(:checked)").each(function() {
$('.' + $(this).attr('value')).hide();
});
$("#filterColor input:not(:checked)").each(function() {
$('.' + $(this).attr('value')).hide();
});
}
});
代码正在工作,但数字范围代码与颜色和形状分开工作。而且我不明白如何强制这个脚本一起工作。 当我选择数字范围和形状或颜色(或颜色和形状一起)时,我想在数字范围中看到该形状或颜色。我尝试了多种变体,但没有一种变体不起作用。 这个链接是我拥有的示例 jsfiddle.net/this my code
最佳答案
随着过滤器数量的增加,您需要检查各种可能性,因为您有三个过滤器,这里的条件是:
- 未选择任何过滤器
- 选择任意一个过滤器
选择所有过滤器
if(color.length == 0 && shape.length == 0 && number.length > 0){ showEle(number) }else if(color.length == 0 && shape.length > 0 && number.length == 0){ showEle(shape) }else if(color.length > 0 && shape.length == 0 && number.length == 0){ showEle(color) }else if(color.length > 0 && shape.length > 0 && number.length == 0){ var temp = []; color.forEach(function(oe){ shape.forEach(function(ie){ temp.push(oe +"."+ie); }); }); showEle(temp); }else if(color.length == 0 && shape.length > 0 && number.length > 0){ var temp = []; shape.forEach(function(oe){ number.forEach(function(ie){ temp.push(oe +"."+ie); }); }); showEle(temp); }else if(color.length > 0 && shape.length == 0 && number.length > 0){ var temp = []; color.forEach(function(oe){ number.forEach(function(ie){ temp.push(oe +"."+ie); }); }); showEle(temp); }else{ var temp = []; color.forEach(function(oe){ number.forEach(function(ie){ shape.forEach(function(iie){ temp.push(oe +"."+ie + "." + iie); }); }); }); showEle(temp); }
请参阅此 fiddle 以获取更多信息 https://jsfiddle.net/y2b3qebr/23/
关于javascript - 如何组合两个过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42153493/