操作后如何重置DOM?

我的页面包含一些我使用jQuery构建的小向导。

我想让用户重启/重置向导并从头开始启动它。

无论如何都可以在不刷新页面的情况下执行此操作?

实现此目的的一种方法是克隆()向导的元素树处于其初始状态,并将其存储在全局变量或文档的数据中 :

$(document).data("initialWizard", $("#yourWizard").clone(true)); 

(注意,将true传递给clone()也会克隆元素数据和事件处理程序,这在您的情况下可能会很方便。)

然后,当您要将向导还原到其原始状态时,您可以执行以下操作:

 $(document).data("initialWizard").replaceAll("#yourWizard"); 

在不刷新页面的情况下重新开始的唯一方法是手动将DOM返回到加载页面时的状态并恢复任何javascript状态。 您可能需要记录/记住初始状态,以便您可以返回它或跟踪所有增量更改,以便您也可以返回到那里。

如果你真的想重新开始,刷新有什么问题?

与上面类似,这就是我最终做的事情。 我将整个jQuery doc内容存储在bootup()函数中(并运行它)。 正文的初始内容存储在originalDOM变量中。 然后在我内部有一个playAgain函数,它将body的内容设置为originalDOM,并通过调用bootup()函数再次运行整个jQuery内容。 这将通过单击“.startover”类的按钮来触发。

 bootup(); var bootup = function(){$(document).ready(function(){ var originalDOM=document.body.innerHTML; //jQuery lines of code here var playAgain = function(){ $(".startover").click(function(){ document.body.innerHTML = originalDOM; bootup(); }); }; playAgain(); });}; 

希望能帮助任何寻找类似内容的人,并且很高兴听到反馈,如果有什么我可以改进的话!