在jquery中仅针对一个切换(选择后的下一个div)而不是全部
除非它显示所有切换按钮,但我只希望它只显示其下方的那个切换。
继承人html
$( ".toggle" ).hide();
$(function () {
$(".binary").change(function() {
if ($(this).val() == "0"){
$( ".toggle" ).hide();
} else {
$( ".toggle" ).show();
}
$("#pane").customScrollbar("resize", true);
});
});
继承人html
<div class="option checkbox">
<label class="field_wrap">
<div class="label">1</div>
<div class="field">
<select class="binary" name="option_1">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
</label>
</div>
<div class="toggle">
toggle 1
</div>
<div class="option checkbox">
<label class="field_wrap">
<div class="label">1</div>
<div class="field">
<select class="binary" name="option_1">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
</label>
</div>
<div class="toggle">
toggle 2
</div>
答案 0 :(得分:0)
您可以使用jQuery的.next()方法。
$(function () {
$(".binary").change(function() {
if($(this).val() == 0){
$(this).parents("div.checkbox").next('.toggle').hide();
} else {
$(this).parents("div.checkbox").next('.toggle').show();
}
$("#pane").customScrollbar("resize", true);
});
});
这是Demo Fiddle。
答案 1 :(得分:0)
你应该尝试:第一个选择器
$(function () {
$(".binary:first").change(function() {
if($(this).val() == "0"){
$(this).next(".toggle").hide();
} else {
$(this).next(".toggle").show();
}
$("#pane").customScrollbar("resize", true);
});
});
答案 2 :(得分:0)
尝试以下
$( ".toggle" ).hide();
$(function () {
$(".binary").change(function() {
if ($(this).val() == "0"){
$(this).parent().parent().parent().next().hide();
} else {
$(this).parent().parent().parent().next().show();
}
$("#pane").customScrollbar("resize", true);
});
});
答案 3 :(得分:0)
这类似于@Ganesh的答案,但具有更高的特异性,这在您的场景中可能很重要。
$(".toggle").hide();
$(function () {
$(".binary").change(function () {
if ($(this).val() == "0") {
console.log($(this).closest('div.option.checkbox').length);
$(this).closest('div.option.checkbox').next(".toggle").hide();
} else {
$(this).closest('div.option.checkbox').next(".toggle").show();
}
$("#pane").customScrollbar("resize", true);
});
});