Как я могу "сбросить" <div>в исходное состояние после того, как он был изменен JavaScript?

Question

У меня есть DIV с формой в нем. Когда пользователи отправляют форму, и она успешно отправляется, я заменяю форму простым сообщением «все хорошо сейчас»:

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

Есть ли хороший способ "сбросить" div в его "исходное состояние" в соответствии с HTML, с которым он прибыл? Я могу думать только о том, чтобы сделать что-то вроде этого:

//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

Вы можете использовать атрибут данных для сохранения состояния, а не переменную

$('#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.clone());

Таким образом, вы можете многократно использовать это, чтобы восстановить ваш div в исходное состояние, сохраняя данные в "originalState" нетронутыми.Работал на меня.

Answer 6

Несколько элегантнее?

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

Answer 7

У вас есть в основном три варианта.

1. Запомните исходную разметку, как и в случае с переменной originalState, указанной выше.
2. Используйте AJAX для повторного запроса разметки. Это можно легко сделать, если у вас есть код на стороне сервера, использующий метод $.ajax() в jQuery.
3. Заставить страницу перезагрузиться.

Answer 8

Это мое самое первое взаимодействие на этом сайте - я пока не могу комментировать, но это @ комментарий Флёва на ответ @Josiah Ruddell:

Параметр по умолчанию для .clone() равен "false", которая не будет клонировать слушателей событий.Если вы сделаете это .clone(true), это также клонирует слушателей событий.Я проверил это (с остальной частью его ответа), и это работает.

w3schools jQuery clone () метод

Answer 9

Выполнение вызова функции empty в jQuery сделает это

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