Question

以下是fiddle，用于通过点击更改标签的值。

但我不想在点击编辑（href）

时这样做

我只想点击名称并将其更改为文本框，当我将鼠标移到外面时，它应该更改回标签

我该怎么做？

这是我的jquery代码

    $(document).ready(function() {
    $('a.edit').click(function () {
        var dad = $(this).parent().parent();
        dad.find('label').hide();
        dad.find('input[type="text"]').show().focus();
    });

    $('input[type=text]').focusout(function() {
        var dad = $(this).parent();
        $(this).hide();
        dad.find('label').show();
    });
});

Answer 1

只需更改点击功能的目标：

$('a.edit').click(function () {

到

$('.text-info').click(function () {

如果您希望在鼠标输出上隐藏输入而不是在外部单击时，也可以添加悬停功能。例如：

$('input[type=text]').hover(function () {
}, function () {
    var dad = $(this).parent();
    $(this).hide();
    dad.find('label').show();
});

这是您调整后的fiddle。

Answer 2

你可以尝试使用这个小提琴的修改版本：

$(document).ready(function() {
    $('.control-label').click(function () {
        $(this).hide();
        var dad = $(this).parent();
        dad.find('input[type="text"]').show().focus();
    });

    $('input[type=text]').focusout(function() {
        var dad = $(this).parent();
        $(this).hide();
        dad.find('label').text(this.value).show();
    });
});

它之前没有设置标签中的默认值。

Answer 3

这样的事情怎么样？ Demo

$(document).ready(function() {
    $('.control-label').click(function () {
        $(this).hide();
        $(this).siblings('.edit-input').show();
    });

    $('.edit-input').focusout(function() {
        $(this).hide();
        $(this).siblings('.control-label').text($(this).val()).show();
    });
});

如何在单击文本时将文本更改为文本框

3 个答案: