如果单选按钮是选中的呼叫功能处理程序

时间：2013-10-11 04:54:51

标签： javascript jquery

http://liveweave.com/rFqNTl

使用属性选择器修复，并触发元素上的更改 - http://liveweave.com/ZTirGp

我有几个单选按钮充当菜单。检查设计时，会显示设计器div，当检查代码时，会显示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>

CSS 

#header {
    color: #2234cb;
    text-shadow: 0px 0px 2em #fff;
    background:#e0e2f9; /* Old browsers */
    background:-moz-linear-gradient(top,  #e0e2f9 0%, #d7dbf8 100%); /* FF3.6+ */
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e2f9), color-stop(100%,#d7dbf8)); /* Chrome,Safari4+ */
    background:-webkit-linear-gradient(top,  #e0e2f9 0%,#d7dbf8 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top,  #e0e2f9 0%,#d7dbf8 100%); /* Opera 11.10+ */
    background:-ms-linear-gradient(top,  #e0e2f9 0%,#d7dbf8 100%); /* IE10+ */
    background:linear-gradient(to bottom,  #e0e2f9 0%,#d7dbf8 100%); /* W3C */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e2f9', endColorstr='#d7dbf8',GradientType=0 ); /* IE6-9 */
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

#header input[type="radio"] { display:none; }
#header div { display:inline-block; margin:0; }

#header label {
    cursor: pointer;
    display: inline-block;
    margin:.25em;
    padding:.7em;
    border-radius:50em;
    font: 12px arial, sans-serif;
    color: #444;
    text-shadow: 0px 0px .25em #fff;
    background:#f6f7fd; /* Old browsers */
    background:-moz-linear-gradient(top,  #f6f7fd 0%, #e0e2f9 100%); /* FF3.6+ */
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7fd), color-stop(100%,#e0e2f9)); /* Chrome,Safari4+ */
    background:-webkit-linear-gradient(top,  #f6f7fd 0%,#e0e2f9 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top,  #f6f7fd 0%,#e0e2f9 100%); /* Opera 11.10+ */
    background:-ms-linear-gradient(top,  #f6f7fd 0%,#e0e2f9 100%); /* IE10+ */
    background:linear-gradient(to bottom,  #f6f7fd 0%,#e0e2f9 100%); /* W3C */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f7fd', endColorstr='#e0e2f9',GradientType=0 ); /* IE6-9 */
}
#header label:hover { color: #111; background: #f6f7fd; }
#header label:active { color: #111; background: #c1c5f6;}
#header input[type="radio"]:checked + label { color: #e0e2f9; background: #666; box-shadow:inset 0 0 .25em #000; text-shadow: 0px 0px .25em #e0e2f9; }

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;
});

2 个答案:

答案 0 :(得分：3)

这就是你想要的：$("#designer").trigger('change');

更改您的＆＃34;新文档＆＃34;处理程序：

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

答案 1 :(得分：1)

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

$("#designer").trigger('click');

此外，您的大部分代码都在包含无线电元素的div上使用“更改”事件。因此，更改事件会从输入中冒出来，您将在div级别处理它。除非你有充分的理由，否则输入并不是真正需要的，你可以在div元素上使用click事件。更直截了当。

以下是您对我提到的事件进行修改的代码： http://liveweave.com/Lsmg7B

文档＆amp;相关阅读

相关问题
最新问题