使用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();
});

这是一个样本.

只是为了好玩,我写了一个小脚本,支持<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)
});

样品

你真的不需要所有的ID,但是如果你要用新值进行POST,你可以很容易地参考这些元素.