在JavaScript修改后，如何将“重置”为原始状态？[英]How can I “reset” to its original state after it has been modified by JavaScript? 本文翻译自 abolotnov 查看原文 2011-04-05 78071 html/

I have a DIV with a form in it. When users submit the form and it gets successfully submitted, I replace the form with a simple "everything is good now" message:

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

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

Is there a good way to "reset" the div to its "original state" as per the HTML it has arrived with? I can only think of actually doing something like this:

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

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

It doesn't look very elegant - I guess there is a better solution for this, no?

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

7 个解决方案

#1

I would clone the element, instead of saving the content. Then use replaceWith to restore it:

我会克隆元素，而不是保存内容。然后使用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

#2

You can use the data attribute to save the state rather than a variable

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

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

#3

What you're doing is not optimal. The best solution would be this:

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

When the form gets successfully submitted, just hide() the FORM element, and show() the message (which is initially hidden). And then, later, just show() the FORM element and hide() the message.

表单成功提交后，只需隐藏（）FORM元素，然后show（）消息（最初隐藏）。然后，稍后，只显示（）FORM元素并隐藏（）消息。

#4

Yeah, the way you have is the way to do it. The DOM does not save the previous states of DIVs, so you need to save that yourself.

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

#5

In my opinion best is to use this:

在我看来，最好是使用这个：

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

This way you can repeatedly use this to restore your div to original state while keeping the data in "originalState" intact. Worked for me.

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

#6

Somewhat more elegant?

有点优雅吗？

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

#7

You have basically three options.

你基本上有三个选择。

Remember your original markup, as you do with your originalState variable above.
记住您的原始标记，就像使用上面的originalState变量一样。
Use AJAX to re-request the markup. You can do this easily if you have server side code using the $.ajax() method in jQuery.
使用AJAX重新请求标记。如果您使用jQuery中的$ .ajax（）方法获得服务器端代码，则可以轻松完成此操作。
Cause the page to reload.
导致页面重新加载。

#1