How to combine two filters

Question

I have circle, triangle, square in four color, each this shape have own value I want to make filter for shape, color and numerical range. this is code for filter 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>

This code for 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();
        });
    }
});

Code is working, but the numerical range code works separately from color and shape. And I don't understand how to force this script to work together. When I select numeric range and shape or color(or together color and shape) I want to see this shape or color in the numeric range. I try the many varients, but no one variant not work. This link on example that I have jsfiddle.net/this my code

Answer 1

As the number of filters increases you need to check various possibility as you have three filters here conditions is :

1. None of the filter is selected
2. Any one filter is selected

3. All the filter is selected

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

See this fiddle for more info https://jsfiddle.net/y2b3qebr/23/