更优雅的编写此脚本的方式（点击隐藏span，显示输入框）

Question

I have this code:

$('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次单击显示字段并让访问者在该字段中输入？

- rac

---

你的代码没有起作用。 - Linga

你需要添加 setfocus。请查看此演示：http://jsfiddle.net/L6Hjc/ - Rohit Tiwari

不要使用类选择器，而要使用id。因为在所有选择器中，类选择器最慢。 - Rohit Tiwari

@RohitTiwari 这个问题太笼统了，无法得出结论。如果在同一页中重复使用结构，ID 也不是解决方案。 - Capsule

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/

- Ram

---

一个包含多个 .on() 处理程序的对象。这非常酷。+1 - techfoobar

Answer 2

不确定是否更美观，但如果您的HTML结构与您的问题中所示相同，您可以使其变得更短。

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

- techfoobar

---

我喜欢你使用on()方法链式编程的方式。但是闭包的内容并不是很易读。虽然代码变得更短了，但可读性并没有提高。 - thpl

Answer 3

可能是最短的一个（几乎所有内容都被连接在一起）。

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

Demo here

- Capsule

Answer 4

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

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

在我看来，这段代码并没有太多需要改进的地方。它本身并没有写得很糟糕。唯一的问题是，如果您在同一页上添加多个这样的控件，它将无法正常工作，因为您的选择器不够具体。

您可以更改：

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

为了

if (!$(this).val()) {

如果您喜欢，可以选择这个选项。

- Hans Roerdinkholder

Answer 5

你可以使用.toggle()属性来完成这个操作，并在addnote的focusout时调用span click event。

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

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

- 124

Answer 6

也许你可以稍微整理一下你的选择器？

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

不确定这是否符合您的要求。

- timo

Answer 7

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

demo

可以翻译为："

{{链接1：演示}}

"，其中保留了HTML格式，并且没有进行解释。

- Bhojendra Rauniyar

Answer 8

编写一个与此目的相关的函数，如下所示。

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

这里是 Fiddle。

- Linga