Question

我有按钮修改，按钮保存。当我点击修改按钮时，它会使用textbox或textarea替换我的元素。如果我点击使用其他功能的按钮保存，如何将该元素恢复为replaceWith()之前的状态？

<div class="will-be-turned-into-texbox"></div>

function edit(){
    // Replace above div with texbox
}

function save_edit(){
    // Change back texbox to the original div
}

Answer 1

在replaceWith docs中，有一个提示：

说明：使用提供的新内容替换匹配元素集中的每个元素，返回已删除的元素集。

（我的重点）

所以...存储返回值，当你想把它放回去时，再次使用append或（确实）replaceWith将其放回去。

无端的例子：

var replaced;
$(document).on("click", "#replace", function() {
  // Save what's being replaced
  replaced = $(this).replaceWith('<button id="restore">Restore</button>');
});
$(document).on("click", "#restore", function() {
  // Restore it
  $(this).replaceWith(replaced);
});

<button id="replace">Replace</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

请注意使用委托事件处理程序，以避免重新连接。

JQuery - 已替换的还原元素

1 个答案: