< div >フィルタ< div >フィルタ

Question

赤、青、緑、金色の三角形、四角形の円があります。私は色と形のフィルタを行う必要があります。私は赤い色やサークルを選択した場合たとえば、私はこのコードを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> 

をそして私は、フィルタのため、このコードは書かれています：私はrecive

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

}); 
}); 

をこれは：https://jsfiddle.net/

しかし、コードが正しく動作しません。その後に色を選択した場合は、その逆になります。正解ではないことが分かります。 私の誤った発言はどこですか？色

2選択されていない&形状：：色が選択されるが、形状ではない

3：形状が選択されるが、色ではありません

4：

Answer 1

あなたは4つのシナリオ

1を考慮する必要があり、両方の選択

次に、すべてを表示して非表示にするか、非表示にするか、すべて非表示にするか選択したすべてを表示するかを選択できます第一の方法をINGの

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



    } 

フィドルは、ここではその後、数え切れないほどの失敗の後に問題を打破する問題を打破して、コードを書くのではなく、書き込みを開始するhttps://jsfiddle.net/y2b3qebr/15/