Question

我想创建我的功能，每当我点击单选按钮时，我想调用动态类，例如 - child-21-1，child-22-2。但是我不知道如何使课堂充满活力：

$(document).on('change','.child-21', function() {});

在此基础上，我想隐藏其他div＆＃39>。

$(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>

Answer 1

如果您想根据复选框值显示/隐藏其他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。

P.S。请注意，我已删除内联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>

更好，更易于维护

Answer 2

更新html后的绑定更改方法

$('.child-21').unbind();
if($('.child-21').length > 0 && $._data($('.child-21')[0],"events") == undefined){
    $('.child-21').bind('change',function(){
        // write your code
    });
}

$（document）.on（＆＃39; change＆＃39;，＆＃39; .child-21＆＃39;，function（）{}）;与动态类

2 个答案: