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

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

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

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

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

Это выглядит не очень элегантно - я думаю, для этого есть лучшее решение, нет?

Ответы

Ответ 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

Ответ 2

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

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

Ответ 3

То, что вы делаете, не является оптимальным. Лучшим решением будет следующее:

Когда форма успешно отправлена, просто hide() элемент FORM и show() сообщение (которое изначально скрыто). И затем, позже, просто show() элемент FORM и hide() сообщение.

Ответ 4

Да, у вас есть способ сделать это. DOM не сохраняет предыдущие состояния DIV, поэтому вам нужно сохранить это самостоятельно.

Ответ 5

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

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

Ответ 6

На мой взгляд, лучше всего использовать это:

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

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

Ответ 7

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

  • Помните свою оригинальную разметку, как и в случае с вашей переменной originalState выше.
  • Используйте AJAX для повторного запроса разметки. Вы можете сделать это легко, если у вас есть код на стороне сервера, используя метод $.ajax() в jQuery.
  • Причина перезагрузки страницы.

Ответ 8

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

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

Ответ 9

Это мое самое первое общение на этом сайте - я пока не могу комментировать, но это @Fleuv комментировать @Josiah Ruddell answer:

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

jQuery clone() метод w3schools

Ответ 10

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