我正在使用jQuery使用复选框状态来打开或关闭一些<div>
元素。
我遇到的问题,缺乏要克服的技术知识,当有<div>
分配了多个类时,无论其他指定类的状态如何,它们都会被切换
所以,我正在寻找的是一种切换<div>
的方法,只有当所有类都被切换时才会切换。
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
if ($(this).attr("value") == "foo") {
$(".foo").toggle();
}
if ($(this).attr("value") == "bar") {
$(".bar").toggle();
}
if ($(this).attr("value") == "foobar") {
$(".foobar").toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to Show/Hide:
<label>
<input type="checkbox" name="typeCheckbox" value="foo" checked=checked>Foo</label>
<label>
<input type="checkbox" name="typeCheckbox" value="bar" checked=checked>Bar</label>
<label>
<input type="checkbox" name="typeCheckbox" value="foobar" checked=checked>FooBar</label>
<div class="foo">Foo</div>
<div class="bar">Bar</div>
<div class="foobar">FooBar</div>
<div class="foo bar">Foo and Bar, but not FooBar</div>
<div class="foo bar foobar">Foo, Bar and FooBar</div>
答案 0 :(得分:1)
这个将根据选中的复选框切换div(例如:如果foo和bar打开,那么只有foobar会被隐藏,因为所有其他都包含foo或bar或两者)。
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var classes = [];
$('input[type="checkbox"]').each(function(a, b) {
if ($(b).prop("checked")) {
classes.push($(this).attr("value"));
}
});
var show=(classes.length>0);
if(show) classes = classes.join(",.");
$('.foo,.bar,.foobar').hide();
if(show) $("." + classes).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to Show/Hide:
<label>
<input type="checkbox" name="typeCheckbox" value="foo" checked=checked>Foo</label>
<label>
<input type="checkbox" name="typeCheckbox" value="bar" checked=checked>Bar</label>
<label>
<input type="checkbox" name="typeCheckbox" value="foobar" checked=checked>FooBar</label>
<div class="foo">Foo</div>
<div class="bar">Bar</div>
<div class="foobar">FooBar</div>
<div class="foo bar">Foo and Bar, but not FooBar</div>
<div class="foo bar foobar">Foo, Bar and FooBar</div>
如果您愿意,以下将进行严格检查:
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var classes = [];
var classes2 = [];
$('input[type="checkbox"]').each(function(a, b) {
if ($(b).prop("checked")) {
classes.push($(this).attr("value"));
} else {
classes2.push($(this).attr("value"));
}
});
var show = (classes.length > 0);
if (show) {
classes = classes.join(",.");
}
$('.foo,.bar,.foobar').hide();
if (show) {
$("." + classes).show();
$("." + classes).each(function(a, b) {
for (var i = 0; i < classes2.length; i++)
if ($(b).hasClass(classes2[i])) $(b).hide();
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to Show/Hide:
<label>
<input type="checkbox" name="typeCheckbox" value="foo" checked=checked>Foo</label>
<label>
<input type="checkbox" name="typeCheckbox" value="bar" checked=checked>Bar</label>
<label>
<input type="checkbox" name="typeCheckbox" value="foobar" checked=checked>FooBar</label>
<div class="foo">Foo</div>
<div class="bar">Bar</div>
<div class="foobar">FooBar</div>
<div class="foo bar">Foo and Bar, but not FooBar</div>
<div class="foo bar foobar">Foo, Bar and FooBar</div>