基于带复选框的类来筛选div

我想通过使用复选框来过滤基于某些类的div。基于带复选框的类来筛选div

我一直在使用下面的小提琴几乎适合我的需要： http://jsfiddle.net/6wYzw/738/

但是如果我包裹在黑色/彩色类的顶部额外<div class="anything">，过滤不再工作。

<div class="Test"> 
<div class="Black Color">Black, Color</div> 
<div class="Black">Black</div>

我怎样才能编写这允许在更多的div包裹div的？

谢谢！

来源

2014-10-07 user1872809

你的意思是：当我包上一个额外的。你的意思是与另一个班的股利？ – 2014-10-07 06:18:24

对不起，我的意思是一个额外的div。 http://jsfiddle.net/6wYzw/769/ – user1872809 2014-10-07 06:22:20

这是因为你隐藏所有div元素的变化处理

$("#filters :checkbox").change(function() { 
 
    $(".colors > div").hide(); 
 
    $("#filters :checkbox:checked").each(function() { 
 
     $(".colors ." + $(this).val()).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="anything"> 
 
    <ul id="filters"> 
 
     <li> 
 
      <input type="checkbox" value="Black"/> 
 
      <label for="filter-categorya">Black</label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" value="Color"/> 
 
      <label for="filter-categoryb">Color</label> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<div class="colors"> 
 
    <div class="Black Color">Black, Color</div> 
 
    <div class="Black">Black</div> 
 
    <div class="Black">Black</div> 
 
    <div class="Color">Color</div> 
 
    <div class="Color">Color</div> 
 
</div>

来源

2014-10-07 06:38:58

与OP上IRC正与这一个。

HTML

<input type="checkbox" value="grn_div" name="cb" id="grn_cb" /> 
<label for="grn_cb">Green</label> 
<input type="checkbox" value="red_div" name="cb" id="red_cb" /> 
<label for="red_cb">Red</label> 

<div id="grn_div" > 
    <h2>Greeen SHOW!</h2> 
</div> 
<div id="red_div"> 
    <h2> REED WATERMELON</h2> 
</div>

jQuery的

$(document).ready(function() { 
    $('[id*="_div"]').hide(); 
}); 

$(':checkbox[name="cb"]').click(function() { 
    $("#"+ $(this).val()).toggle(); 
});

这是我的解决方案，因此它不应该太大冲突与当前的设置。

来源

2014-10-07 06:45:28 Togenshi

基于带复选框的类来筛选div

回答

相关问题