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

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

未选择任何过滤器
选择了任何一个过滤器

选择了所有过滤器

  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/

如何组合两个过滤器

1 个答案: