Jquery 编写此脚本的更漂亮的方式（单击时隐藏范围，显示输入）

我有以下代码：

$('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;">

测试

它所做的是：单击时隐藏量程并显示输入字段，当输入字段为空时，单击时返回量程

它是有效的，但我很确定有一种更漂亮的方式来写这个。有谁能帮助我并指出我可以改进的地方吗。谢谢

---

编辑：另外，我注意到，当单击输入显示的文本时，我必须再次单击它才能写入，是否有任何方法可以修复此问题？单击一次，它将显示字段，访问者可以在字段中键入？

要让用户立即键入，您只需在显示输入元素后将焦点设置为输入元素：

$(".addnote").show().focus();

在我看来，在这段代码上没有太多的改进。就其本身而言，它写得并不差。唯一的问题是，如果在同一页上添加多个这样的控件，这将不起作用，因为选择器不够具体

你可以改变：

if ($(this).val() == "") {

到

如果您愿意。

您可以使用此属性的

.toggle（）

属性

并在

addnote

的

focusout

上调用

span单击事件

$('body').on('click', 'span.note', function (event) {
    $(this).toggle();
    $(".addnote").toggle();
});

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

---

也许你可以清理一下选择器

$('.note').click(function(){
    $(this).hide();
    $(".addnote").show();
});
$('.addnote').focusout(function(){
    if (!$(this).val()) {
        $(this).hide();
        $("span.note").show();
    }
});

不确定这是否是你想要的

$('body').on('click', 'span.note', function (event) {
    $(this).hide();
    $(".addnote").show().focus();//add focus when element is shown
});
$('body').on('focusout', '.addnote', function (event) {
    if ($(this).val() == "") {
        $(this).hide();
        $("span.note").show();
    }
});

---

不确定它是否更漂亮，但如果您的HTML结构与您的问题相同，您可以将它缩短一点

$('body')
    .on('click', 'span.note', function () {
        $(this).hide().next('.addnote').show();
    })
    .on('focusout', '.addnote', function () {
        if(!this.value) $(this).hide().prev('.note').show();
    });

---

如果元素是同级元素，则还可以将对象传递给

.on（）

方法：

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

可能是最短的一个（几乎所有的东西都是链子锁着的）

---

为此编写一个函数，如下所示

function cal(e){
    var t= e;
    $('*').show();
    $(e).hide();
}
$('body').on('click', '.note', function (event) {
    cal($(this));
});

$('body').on('focusout', '.addnote', function (event) {
    if($(this).val()=='')
    cal($(this));
});

---

以下是

您的代码不起作用您需要添加setfocus检查此演示，而不是使用类选择器use id，因为类选择器是最慢的all@RohitTiwari这个问题太笼统了，不能这样说。如果结构在同一页中重复，ID也不是解决方案。我喜欢您使用

on（）

方法链接的方法。但是闭包的内容不是真正可读的。它较短，但不是真正可读的。一个包含多个

.on（）

处理程序的对象。这很酷+1.

$('span.note').click(function() {
    $(this).hide().next().blur( function() {
        if ($(this).val() == "") $(this).hide().prev().show();
   }).show();
});

function cal(e){
    var t= e;
    $('*').show();
    $(e).hide();
}
$('body').on('click', '.note', function (event) {
    cal($(this));
});

$('body').on('focusout', '.addnote', function (event) {
    if($(this).val()=='')
    cal($(this));
});