基於帶複選框的類來篩選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

回答

相關問題