编写此脚本的更漂亮的方法(单击时隐藏跨度,显示输入)

Question

我有这个代码:

$('body').on('click', 'span.note', function (event) {
    $(this).hide();
    $(".addnote").show();
});
$('body').on('focusout', '.addnote', function (event) {
    if ($(this).val() == "") {
        $(this).hide();
        $("span.note").show();
    }
});

这是我的HTML:

     <span class="note">test</span>
     <input class="addnote" type="text" style="display:none;">

它的作用是:点击它时隐藏跨度并显示输入字段,当输入字段为空时,focusout它将返回跨度.

它有效,但我很确定有一个更漂亮的方式来写这个.任何人都可以帮助我并指出我可以改进的地方.谢谢.

编辑:此外,我注意到单击输入显示的文本,但我必须再次单击它才能写,任何方式来修复所以1点击它显示字段,访问者可以键入字段？

Answer 1

如果元素是兄弟元素,您还可以将对象传递给.on()方法:

$('body').on({
    click: function() {
       $(this).filter('span').hide().next().show();
    },
    blur: function() {
       this.value == '' && $(this).hide().prev().show();  
    }
}, 'span.note, .addnote');

http://jsfiddle.net/27kYh/