jquery - 使用 jQuery 的可编辑文本功能

Question

我有一个图像按钮，当我单击它时，我希望特定字段从文本变为可编辑文本字段，有点像动态编辑按钮。

因此，我有具有特定 id 的纯文本(即 id="text1")，当我单击按钮时，文本将更改为可编辑字段，可能类似于 $("#text1")。 hide(); 然后是 $("#field1").show(); 但在中间我需要为字段提供文本的值，然后当我单击按钮保存我应该隐藏输入字段并只显示带有新值的文本。

任何帮助将不胜感激。

谢谢:D

Answer 1

给定一个输入字段，一个带有 id="text1" 的段落和一个按钮。

<input type="text" />
<p id="text1">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p>
<button>Copy</button>

这个简单的 jQuery 将从段落中复制文本，隐藏它并显示带有段落文本的输入。

$("button").click(function() {
   $("input").val(
       $("#text1").hide().text()
   ).show();
});

Here's a sample .

只是为了好玩，我编写了一个小脚本来启用 <editable>段落的功能。只需添加一个类 .editable任何段落，jQuery 都会处理剩下的事情。我还没有扩展它以允许多次编辑，而且我几乎开始编写保存到数据库的 AJAX 调用，因为我很无聊。 但是因为阳光明媚，我想我宁愿去海滩。这是我的代码和示例。

$(".editable").each(function(i) {
    var $this = $(this);
    $this.attr("id", "orig-" + i);

    var $edit = $("<button />")
    .text("edit")
    .attr("id", "update-" + i)
    .click(function() {
        var $input = $('<input type="text" />')
            .attr("id", "edit" + i)
            .val($this.text());

        var $save = $('<button>Save</button>')
            .click(function() {
                var $new = $("<p />").text($input.val());
                $input.replaceWith($new);
                $(this).hide();
            });
        $(this).replaceWith($save);

        $this.replaceWith($input);
    });

   $(this).after($edit)
});

<强> SAMPLE

您确实不需要所有 ID，但如果您要使用新值执行 POST，则可以轻松引用这些元素。