尝试构建过滤器。 有一个带有静态元素类和动态生成的元素类的元素列表。
<div class="itemswrap">
<div class="item dynamic1"></div>
<div class="item dynamic2"></div>
<div class="item dynamic3"></div>
<div class="item dynamic2"></div>
</div>
侧边栏中还有一个带有动态生成的 id 的过滤器菜单
<ul class="subnav">
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic1" />
<label for="dynamic1">whatever label</label>
</li>
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic2" />
<label for="dynamic1">whatever label</label>
</li>
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic3" />
<label for="dynamic1">whatever label</label>
</li>
</ul>
想法是将过滤器 ID 与元素类匹配,一旦选中复选框,只有具有匹配类的 div 应该可见。
这是我想出的一个js代码
$(".lifilter").each(function(){
var filter1 = $(this).find('.filtercheck').attr('id');
if ( $(this).find('input.filtercheck').attr('checked') )
{
$(".itemswrap .item").hide();
$('.' + filter1).show();
}
});
然后什么也没发生...
最佳答案
我认为您想在任何复选框状态更改时显示/隐藏 div。尝试将代码包装在复选框的 change
事件中:
$(".filtercheck").on('change', function(){
$(".lifilter").each(function(){
var filter1 = $(this).find('.filtercheck').attr('id');
if ($(this).find('input.filtercheck').attr('checked')) {
$(".itemswrap .item").hide();
$('.' + filter1).show();
}
});
});
关于javascript - 隐藏所有 div 并显示选中相同类别复选框的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28618711/