$(document).on('change'，'.child-21'，function(){ })；具有动态类
$(document).on('change'，'.child-21'，function(){ })；具有动态类
提问于 2016-07-05 15:35:32
我想让我的函数，每当我点击单选按钮时，我想调用动态类，如- child-21-1，child-22-2。但是我不知道如何让类在：
$(document).on('change','.child-21', function() {});在此基础上，我想显示隐藏其他div的。
$(document).on('change','.child-21',function(){
if($(this).val()=='No') {
$('.class-1').show();
$('.class-2').show();
$('.class-3').show();
$('.class-4').show();
} else if($(this).val()=='Yes') {
$('.class-1').hide();
$('.class-2').hide();
$('.class-3').hide();
$('.class-4').hide();
} else {
if ($('#ssn1').prop("checked") == true){
$('#single-text').hide();
$('.class-2').hide();
} else if($('#ssn1').prop("checked") == false) {
$('#single-text').show();
$('.class-2').hide();
} else {
$('.child-21-div').slideDown();
$('.class-2').hide();
}
}
});Html代码
<div class="radio-inline">
<input id="over21" type="radio" name="over21[<?php echo $i; ?>]" class="child-21<?php echo $i; ?>" value="Yes" <?php echo (isset($_SESSION['step4a_data']['over21'][$i]) && $_SESSION['step4a_data']['over21'][$i]=='Yes') ?'checked':''; ?>><label for="radio1">Yes</label>
</div>
<div class="radio-inline">
<input id="over22" type="radio" name="over21[<?php echo $i; ?>]" class="child-21<?php echo $i; ?>" value="No" <?php echo (isset($_SESSION['step4a_data']['over21'][$i]) && $_SESSION['step4a_data']['over21'][$i]=='No') ?'checked':''; ?> ><label for="radio2"> No</label>
</div>回答 2
Stack Overflow用户
发布于 2016-07-05 17:42:45
如果要根据复选框值显示/隐藏其他div元素，请参阅以下代码：
JavaScript:
$(function() { // This is shorthand in jQuery for once document has loaded
$('#over21').on('change', function() {
console.log("The user is over 21.");
$('#over21-div').show();
$('#over22-div').hide();
});
$('#over22').on('change', function() {
console.log("The user is over 22.");
$('#over22-div').show();
$('#over21-div').hide();
});
});HTML：
<div class="radio-inline">
<input id="over21" type="radio" name="over21" class="child-21" value="Yes" unchecked><label for="radio1">Yes</label>
</div>
<div class="radio-inline">
<input id="over22" type="radio" name="over21" class="child-21" value="No" unchecked><label for="radio2"> No</label>
</div>
<div id="over21-div">
<p>Only shows if yes.</p>
</div>
<div id="over22-div">
<p>Only shows if no.</p>
</div>以JSFiddle here的形式查看工作代码。
附注:请注意，我删除了内联PHP。我强烈建议不要这么做--把你的PHP分成几个函数，然后内联调用它们，这样你的HTML中就会有尽可能少的PHP。例如，比较：
<p><?php if (someBoolean) { echo "Bad result."; } elseif (someOtherBoolean && checkbox.booleanReturningFunction()) { echo "Some worse result"; } elseif (life.hasMeaning()) { echo "This is getting confusing."; } else { echo "Yay it worked."; } ?></p>至：
<!-- Nearer the top of our HTML document -->
<?php
function awesome_function() {
if (someBoolean) {
echo "Bad result.";
} elseif (someOtherBoolean && checkbox.isUserCoolEnough()) {
echo "Some worse result";
} elseif (life.hasMeaning()) {
echo "This is getting confusing.";
} else {
echo "Yay it worked.";
}
?>
...
<!-- At the inline area -->
<p><?php awesome_function(); ?></p>它更好，更易维护
Stack Overflow用户
发布于 2016-07-05 17:48:04
在更新html后绑定更改方法
$('.child-21').unbind();
if($('.child-21').length > 0 && $._data($('.child-21')[0],"events") == undefined){
$('.child-21').bind('change',function(){
// write your code
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38197731
复制相关文章
相似问题
腾讯云开发者
