jquery - 编写此脚本的更漂亮的方式(点击时隐藏跨度，显示输入)

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 上它返回跨度。

它可以工作，但我很确定有一种更漂亮的方式来编写它。任何人都可以帮助我并指出我可以改进的地方。谢谢。

编辑:此外，我注意到在单击输入显示的文本时，但我必须再次单击它才能写入，有什么方法可以修复，只需单击一下它就会显示该字段，并且访问者可以在该字段中键入内容？

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/