Javascript 这个<；部门>；在<；部门>；滤波器

我有红色、蓝色、绿色和金色的三角形、正方形、圆形。我需要做颜色和形状的过滤器。例如，如果我选择了红色和圆形，我将只看到一个红色圆圈 此代码为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>

我收到了这封信：

但代码工作不正常。如果在此之后选择“颜色”，则形状或相反。你可以看到不正确的答案。

---

我的失误在哪里？

您需要考虑4种情况

1：未选择颜色和形状

2：已选择颜色，但未选择形状

3：已选择形状，但未选择颜色

4:两个都已选定

然后，您可以全部显示并隐藏未选定项，或者全部隐藏并显示所有选定项。我正在使用第1种方式

  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是解决问题然后编写代码的好方法，而不是在无数次失败后开始编写然后解决问题+1

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



    }