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/

Answer 2

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

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

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

你可以改变：

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

到

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

如果您愿意。

Answer 3

不确定它是否更漂亮，但如果您的HTML结构与问题一样，则可以缩短它。

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

Answer 4

可能是最短的一个（几乎所有东西都被链接）

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

Demo here

Answer 5

您可以使用.toggle()属性

并在span click event的{{1}}上致电focusout。

addnote

Answer 6

也许你可以稍微清理你的选择器？

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

不确定这是不是你想要的。

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

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

编写此脚本的更漂亮的方法（单击时隐藏跨度，显示输入）

8 个答案: