jQuery:不能有条件地给子元素加上class
jQuery: cannot conditionally add class to children elements
我正在尝试有条件地将 class“closed-3”添加到祖先的所有子“input”元素。祖先应该包含 classes “.summon-next-element.on-sub-sub-level”。但是,我没有任何效果 - 没有添加 class,控制台中没有错误,什么都没有。这是 jQuery:
$('.summon-next-element.on-sub-sub-level').each(function() {
if ($(this).find("input").is(":checked")) {
$(this).nextAll(".summoned-element").first().find("input").addClass("opened-3").removeClass("closed-3");
} else {
$(this).nextAll(".summoned-element").first().find("input").addClass("closed-3").removeClass("opened-3");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element -->
非常感谢您的帮助!
问题是你没有遍历每个输入,所以当你检查输入是否被检查时,它总是 select 第一个在 .on-sub-sub-level
.
试试:
$('.summon-next-element.on-sub-sub-level ~ .summoned-element input').each(function() {
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
} else {
$(this).addClass("closed-3").removeClass("opened-3");
}
});
演示
$('.summon-next-element.on-sub-sub-level ~ .summoned-element input').each(function() {
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
} else {
$(this).addClass("closed-3").removeClass("opened-3");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element -->
还需要将您的逻辑包装在单选按钮选择事件中,据此将发生 classes 的减少赋值/删除:
$(this).on('click', function() { ... }
在您的代码中,还有一个不正确的 class 引用。
$('div').find('input[type=radio]').each(function() {
$(this).on('click', function() {
$('input[type=radio]').addClass("closed-3").removeClass("opened-3");
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element -->
我正在尝试有条件地将 class“closed-3”添加到祖先的所有子“input”元素。祖先应该包含 classes “.summon-next-element.on-sub-sub-level”。但是,我没有任何效果 - 没有添加 class,控制台中没有错误,什么都没有。这是 jQuery:
$('.summon-next-element.on-sub-sub-level').each(function() {
if ($(this).find("input").is(":checked")) {
$(this).nextAll(".summoned-element").first().find("input").addClass("opened-3").removeClass("closed-3");
} else {
$(this).nextAll(".summoned-element").first().find("input").addClass("closed-3").removeClass("opened-3");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element -->
非常感谢您的帮助!
问题是你没有遍历每个输入,所以当你检查输入是否被检查时,它总是 select 第一个在 .on-sub-sub-level
.
试试:
$('.summon-next-element.on-sub-sub-level ~ .summoned-element input').each(function() {
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
} else {
$(this).addClass("closed-3").removeClass("opened-3");
}
});
演示
$('.summon-next-element.on-sub-sub-level ~ .summoned-element input').each(function() {
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
} else {
$(this).addClass("closed-3").removeClass("opened-3");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element -->
还需要将您的逻辑包装在单选按钮选择事件中,据此将发生 classes 的减少赋值/删除:
$(this).on('click', function() { ... }
在您的代码中,还有一个不正确的 class 引用。
$('div').find('input[type=radio]').each(function() {
$(this).on('click', function() {
$('input[type=radio]').addClass("closed-3").removeClass("opened-3");
if ($(this).is(":checked")) {
$(this).addClass("opened-3").removeClass("closed-3");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
<input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
<label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
<input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
<label for="frais_renovation_non">non</label>
</div>
<div class="summoned-element">
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
<label for="frais_renovation_fichier">
Mes justificatifs 1
</label>
</div>
<div class="checkbox info-circle right">
<input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
<label for="frais_renovation_tickets">
Mes justificatifs 2
</label>
</div>
</div>
<!-- end of summoned element -->