2

http://liveweave.com/rFqNTl

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

我有几个作为菜单的单选按钮。检查设计时会显示设计器 div，检查代码时会显示文本区域。

我遇到的一个问题是，当我单击新建时，我希望为 #designer 声明 on 函数，以便在检查时显示该 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;
});
4

2 回答 2

3

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

将您的“新文档”处理程序更改为：

// Call New
$('#newdoc').click(function() {
    code.val('');
    preview.html(code.val());
    $("#designer").trigger('change');
});
于 2013-10-11T05:08:19.620 回答
1

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

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

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

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

文档和相关阅读

于 2013-10-11T05:13:34.063 回答