如何组合两个过滤器

Question

我有圆形、三角形、方形四种颜色，每个这个形状都有自己的价值 我想为形状、颜色和数值范围制作过滤器。 这是过滤器 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

Answer 1

随着过滤器数量的增加，您需要检查各种可能性，因为您有三个过滤器，这里的条件是：

1. 未选择任何过滤器
2. 已选择任何一个过滤器

3. 所有过滤器都被选中

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

有关更多信息，请参阅此小提琴https://jsfiddle.net/y2b3qebr/23/