Question

我所做的基本上是一个用户个人资料，其中有一个文本框，供用户添加关于他/她自己的描述。虽然我有一个单独的页面，用户可以在其中编辑个人资料，但我想提供一个功能，当用户将鼠标悬停在他的描述框上时，他会看到edit按钮。

如果用户单击该按钮，则他/她可以在其中编辑描述字段，并使用Ajax更新后端。 ajax调用和后端处理很简单，但如何使用html和textarea按钮替换submit，然后使用javascript再次放回原始html。

这是我的html外观

<div id="personalText" >
    <a href="#" id="editButton"> edit </a>
    <p id="descText">{{profile.desc}}</p>
</div>

当有人点击editButton时，我想将personalText内的html替换为包含textarea中原始文本的descText和update按钮。当用户编辑文本并点击更新时，我会更新后端模型并再次添加<a>代码和<p>代码。

任何人都可以提供帮助。我似乎知道如何做它的一部分，但无法弄清楚如何在update点击上替换原始结构。

Answer 1

不是创建/销毁DOM元素，而是选择隐藏编辑<textarea/>。

<div id="personalText" >
    <div class="display">
        <a href="#" id="editButton">edit</a>
        <p id="descText">{{profile.desc}}</p>
    </div>
    <div class="edit" style="display:none;">
        <input type="submit" value="Update"/>
        <textarea>{{profile.desc}}</textarea>
    </div>
</div>

然后你的jQuery可以简单地切换元素并处理你的ajax帖子。

$("input[type='submit']").on("click", function() {
    $.ajax({
        url:"/your/url/"
    }).success(function(){
        $(".display, .edit").toggle();
        $("#descText").html($("textarea").val());
    });
    return false;
});

<强> Example on jsfiddle

Answer 2

$('#editButton').click(function(){
  var text = $('descText').text();
  var textArea = $('<textarea></textarea>');
  textArea.value = text;
  $('#personalText').replaceWith(textArea);
});

如何使用javascript通过textarea替换元素

2 个答案: