Question

我有一个带有表格的DIV。当用户提交表单并成功提交时，我会用简单的“一切都很好”消息替换表单：

$("#some_div").html("Yeah all good mate!");

是否有一种很好的方法可以根据已经到达的HTML将div“重置”为“原始状态”？我只能想到实际做这样的事情：

//before I change the DIV
var originalState = $("#some_div").html();
//manipulate the DIV
//...
//push the state back
$("#some_div").html(originalState);

它看起来不太优雅 - 我想有一个更好的解决方案，不是吗？

Answer 1

我会克隆元素，而不是保存内容。然后使用replaceWith恢复它：

var divClone = $("#some_div").clone(); // Do this on $(document).ready(function() { ... })

$("#some_div").html("Yeah all good mate!"); // Change the content temporarily

// Use this command if you want to keep divClone as a copy of "#some_div"
$("#some_div").replaceWith(divClone.clone()); // Restore element with a copy of divClone

// Any changes to "#some_div" after this point will affect the value of divClone
$("#some_div").replaceWith(divClone); // Restore element with divClone itself

Answer 2

您可以使用data属性来保存状态而不是变量

$('#some_div').data('old-state', $('#some_div').html());
$('#some_div').html($('#some_div').data('old-state'));

Answer 3

你所做的并不是最佳的。最好的解决方案是：

表单成功提交后，只需hide() FORM元素，show()消息（最初隐藏）。然后，稍后只需show() FORM元素和hide()消息。

Answer 4

是的，你的方式是做到这一点的方式。 DOM不保存以前的DIV状态，因此您需要自己保存。

Answer 5

有点优雅吗？

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState);

Answer 6

在我看来，最好用这个：

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState.clone());

这样，您可以重复使用此功能将div恢复为原始状态，同时保持“originalState”中的数据不变。为我工作。

Answer 7

你基本上有三种选择。

请记住您的原始标记，就像使用上面的originalState变量一样。
使用AJAX重新请求标记。如果您使用jQuery中的$.ajax()方法获得服务器端代码，则可以轻松完成此任务。
导致页面重新加载。

Answer 8

在jQuery中调用empty函数即可

$(".div").empty();

Answer 9

这是我在该网站上的首次互动-我目前无法评论，但这是@Fleuv对@Josiah Ruddell的回答的评论：

.clone()的默认参数是“ false”，它不会克隆事件侦听器。如果您使用.clone(true)，它也会克隆事件监听器。我已经对其进行了测试（其余的答案），并且可以正常工作。

w3schools jQuery clone() method

Answer 10

var originalState = $（“＃some_div”）。clone（true，true）; $（“＃some_div”）。replaceWith（originalState.clone（true，true））;

在用JavaScript修改<div>后，如何将<div>“重置”为原始状态？</div>

10 个答案: