Javascript 如果选中单选按钮，则调用函数处理程序

通过使用属性选择器并触发元素上的更改来修复- 我有几个单选按钮作为菜单。当选中design时，将显示designer div，当选中code时，将显示textarea

我遇到的一个问题是，当我单击New时，我希望为#designer声明on函数，以便在选中时显示该div并隐藏其他div

我添加了下面的代码和一个演示，以显示我遇到的问题

HTML

<div id='header'>
    <center>
        <div class="menubtn" id='newdoc'>
            <input name="opt" id="opt-1" checked="checked" type="radio">
            <label for="opt-1">New</label>
        </div>
        <div class="menubtn" style='display:none;' id='openload'>
            <input name="opt" id="opt-2" type="radio">
            <label for="opt-2">Browse</label>
        </div>
        <div class="menubtn" onclick='saveTextAsFile()'>
            <input name="opt" id="opt-3" type="radio">
            <label for="opt-3">Save</label>
        </div>
        <div class="menubtn" id='dropbox'>
            <input name="opt" id="opt-4" type="radio">
            <label for="opt-4">Dropbox</label>
        </div>
        <div class="menubtn" id='designer'>
            <input name="opt" id="opt-5" type="radio">
            <label for="opt-5">Design</label>
        </div>
        <div class="menubtn" id='settings'>
            <input name="opt" id="opt-6" type="radio">
            <label for="opt-6">Settings</label>
        </div>
        <div class="menubtn" id='codecanvasdisplay'>
            <input name="opt" id="opt-7" type="radio">
            <label for="opt-7">Code</label>
        </div>
        <div class="menubtn" id='fullcode'>
            <input name="opt" id="opt-8" type="radio">
            <label for="opt-8">Full Code</label>
        </div>
        <div class="menubtn" style='display:none;' id='intcolorpick'>
            <input name="opt" id="opt-9" type="radio">
            <label for="opt-9">Color Picker</label>
        </div>
    </center>
</div>

JQuery/JavaScript

// Call New
$('#newdoc').click(function() {
    $("#designer")[0].click();
    code.val('');
    preview.html(code.val());
});

$('#opt-1').click(function(){
    if($('#opt-1').attr('checked')=="checked"){
        $(this).attr('checked', false);
        $('input#opt-5').attr('checked', true);
    }else{
        $('input#opt-5').attr('checked', false);
    }
});

// Call Designer UI
$('#designer').on('change',function() {
    $('#canvasbg, #canvas').show();
    $('#settingsdisplay').hide();
    $("#fullwebsitecode").hide();
    $("#bottom, #code").hide();
    return false;
});

// Call Settings
$('#settings').on('change',function() {
    $('#settingsdisplay').show();
    $('#canvasbg, #canvas, #bottom, #code').hide();
    $("#fullwebsitecode").hide();
    return false;
});

// Call Show Code
$('#codecanvasdisplay').on('change',function() {
    $("#bottom, #code").show();
    $('#settingsdisplay').hide();
    $('#canvasbg, #canvas').hide();
    $("#fullwebsitecode").hide();
    return false;
});

---

这就是您想要的：

$（“#设计器”）.trigger（'change'）

将“新单据”处理程序更改为：

// Call New
$('#newdoc').click(function() {
    code.val('');
    preview.html(code.val());
    $("#designer").trigger('change');
});

这就是您想要的：
$（“#设计器”）.trigger（'change'）

将“新单据”处理程序更改为：

// Call New
$('#newdoc').click(function() {
    code.val('');
    preview.html(code.val());
    $("#designer").trigger('change');
});

您可以使用
trigger
触发绑定到给定元素的事件

$（“#设计器”）.trigger（'click'）

此外，您的大部分代码在包含radio元素的div上使用“change”事件。因此，更改事件从输入冒出，您在div级别处理它。除非您有充分的理由，否则实际上并不需要输入，您可以在div元素上执行click事件。要简单得多

以下是对我提到的事件进行修改的代码：

文档和相关阅读


jQuery.trigger
-
javascripter.net上的事件冒泡-
您可以使用
trigger
触发绑定到给定元素的事件

$（“#设计器”）.trigger（'click'）

此外，您的大部分代码在包含radio元素的div上使用“change”事件。因此，更改事件从输入冒出，您在div级别处理它。除非您有充分的理由，否则实际上并不需要输入，您可以在div元素上执行click事件。要简单得多

以下是对我提到的事件进行修改的代码：

文档和相关阅读


jQuery.trigger
-
javascripter.net上的事件冒泡-
我想你的标题有错。。。“fuction”@Okuma.Scott你可以编辑帖子来修复它，你知道。。。我处理好了。@Chris我想指出这一点会更有趣：）我想你的标题有错。。。“fuction”@Okuma.Scott你可以编辑帖子来修复它，你知道。。。我处理好了。@Chris我想指出它会更有趣：）