我会尝试尽可能清楚地说明这一点,这样我就不会让任何人感到困惑。我试图做的是,我有一组div,都是以display: none
开头的。每个div
都有一组不同的类,除了它们都将共享class="card"
,并且一些div将共享相同的类。例如:
<div class="card simple rough arcuate">
</div>
<div class="card simple smooth needle">
</div>
所以我想要做的是,使用jquery,当选中一个带有相应类别的复选框时,会显示卡片,如果一个与其中一个类别不对应的复选框,则会消失。检查。因此,如果选中带有"simple"
复选框的复选框,则会同时显示,如果单击"rough"
的复选框,则第二个消失。这是我迄今为止所尝试过的。
$('#simple').change(function() {
if ($('.card').hasClass('simple') && $('#simple').prop("checked")) {
$('.card').show()
} else {
$('.card').hide()
}
});
$('#arcuate').change(function() {
if ($('.card').hasClass('arcuate') && $('#arcuate').prop("checked")) {
$('.card').show()
} else {
$('.card').hide()
}
});
为了后人的缘故,这里有一些复选框:
<label><input id="simple" type="checkbox"/>Simple</label>
<label id="arcuate"><input type="checkbox"/>Arcuate</label>
<label id="rough"><input type="checkbox"/>Rough</label>
<label id="smooth"><input type="checkbox"/>Smooth</label>
答案 0 :(得分:0)
有许多不同的方法可以实现这一目标。您可以使用jQuery的filter方法
$('.card').hide().filter('.'+your_class).show();
如果是siblings:
$('.card').filter('.'+your_class).show().siblings().hide();
答案 1 :(得分:0)
类选择器是.myclass
点,ID为#myid
。使用该类作为示例。简化一点。
在这个例子中,我添加了一个数据属性并查询要显示的类。 现在,您只需添加更多输入和/或div,无需更改代码即可显示已检查的内容。请注意,我挂钩了一个带有id的div,只需选择那些,设置值可见的值。
不需要在这里保留一堆id。
$('.card').toggle(false);// initial hide
$('#toggles').on('change','input[type="checkbox"]',function(event) {
var checks = $(event.delegateTarget).find('input[type="checkbox"]')
checks
.filter(':checked')
.each(function(){
var targets = $(this).data("target");
$('.card.'+targets).show();
});
checks
.filter(":not(:checked)")
.each(function(){
var targets = $(this).data("target");
$('.card.'+targets).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="toggles">
<label><input type="checkbox" data-target="simple" />Simple</label>
<label><input type="checkbox" data-target="arcuate"/>Arcuate</label>
<label><input type="checkbox" data-target="rough" />Rough</label>
<label><input type="checkbox" data-target="smooth" />Smooth</label>
<label><input type="checkbox" data-target="needle" />Needle</label>
</div>
<div class="card simple rough arcuate">simple rough arcuate</div>
<div class="card simple smooth needle">simple smooth needle</div>
<div class="card simple needle">simple needle</div>
<div class="card simple rough">simple rough</div>