过滤器中的过滤器(The < div > filter in the < div > filter)
我有红色，蓝色，绿色和金色的三角形，方形，圆形。 我需要为颜色和形状做过滤器。 例如，如果我选择了红色和圆圈，我将只看到一个红色圆圈此代码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>我已经为过滤器编写了这段代码：
$(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/
但代码工作不正确。 如果你在形状之后选择颜色，或者相反。 你可以看到不正确的答案。 我的错误在哪里？
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?
最满意答案
您需要考虑4种情况
1：未选择颜色和形状
2：颜色选择但不是形状
3：选择形状但不是颜色
4：两者都选中了
然后你可以显示所有并隐藏未选中或隐藏全部并显示所有选中我使用的第一种方式
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/
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/
更多推荐
发布评论