The < div > filter in the < div > filter

Question

I have triangle, square, circle in red, blue, green and gold colors. I need to do filters for color and shapes. For example if I selected red color and circle I will see only one red circle This code HTML:

<table border="0">
<tr>
    <td width="20%" >
        <div id="triangleRed" class="color Red triangle"></div>
        <div id="triangleBlue" class="color Blue triangle"></div>
        <div id="triangleGreen" class="color Green triangle"></div>
        <div id="triangleGold" class="color Gold triangle"></div>
    </td>
   <td width="20%" align="center">
        <div id="squareRed" class="color Red square"></div>
        <div id="squareBlue" class="color Blue square"></div>
        <div id="squareGreen" class="color Green square"></div>
        <div id="squareGold" class="color Gold square"></div>
    </td>
    <td width="40%" align="center">
        <div id="circleRed" class="color Red circle"></div>
        <div id="circleBlue" class="color Blue circle"></div>
        <div id="circleGreen" class="color Green circle"></div>
        <div id="circleGold" class="color Gold circle"></div>
    </td>
    <td width="40%" >
        Filter:
        <br/>
        <div class="searchColor" id="filterColor">
            <div class="searchTextColor"> Color: </div>

            <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">
            <div class="searchShape"> Shape:</div>
            <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>
    </td>
</tr>

And I has writen this code for filter:

$(document).ready(function() {

$("div[class='searchColor'] input").change(function () {
        var k = this.value;
    switch ($('input:checked').length) {

        case 0:
            $('.color').show();
            return;
        case 1:
            if (this.checked) {
                $('.color').hide();
            }
    }
    if($("div [class='paintSelect'] input").checked){
                    if (this.checked) {
                        $('.' + this.value).show();
                    } else {
                        $('.' + this.value).hide();
                    }
            }


    $('.' + this.value).toggle();

});
});

I recive this:https://jsfiddle.net/

But the code works not correctly. If you select color after that the shape or on the contrary. You can see the not correct answer. Where my misstake?

Vinod Louis Vinod Louis · Accepted Answer · 2017-02-08T09:28:22

You need to consider 4 scenarios

1 : color & shape not selected

2 : color selected but not shape

3 : shape selected but not color

4 : both selected

Then either you can show all and hide not selected or hide all and show all selected i'm using the 1st way

  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() {
                    $('.' + $(this).attr('value')).hide();
                    });
    }else if($("#filterColor input:checked").length > 0 && $("#searchShape input:checked").length == 0){
        $('.color').show();
      $("#filterColor input:not(:checked)").each(function() {
       //console.log(this,$(this).attr('value'),$('.'+$(this).attr('value')))
                    $('.' + $(this).attr('value')).hide();
                    });
    }else{
        $('.color').show();

       $("#searchShape input:not(:checked)").each(function() {
                    $('.' + $(this).attr('value')).hide();
                    });

         $("#filterColor input:not(:checked)").each(function() {
       //console.log(this,$(this).attr('value'),$('.'+$(this).attr('value')))
                    $('.' + $(this).attr('value')).hide();
                    });



    }

Fiddle is here https://jsfiddle.net/y2b3qebr/15/

The < div > filter in the < div > filter

1 Answers