web-dev-qa-db-ja.com

JavaScriptによって変更された<div>を元の状態に「リセット」するにはどうすればよいですか？

フォームを含む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);

見た目はエレガントではありません-これにはもっと良い解決策があると思いますか？

javascriptjqueryhtmlhtml-manipulation
41
abolotnov

コンテンツを保存する代わりに、要素をcloneします。次に、 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
86
Josiah Ruddell

データ属性を使用して、変数ではなく状態を保存できます

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

あなたがしていることは最適ではありません。最善の解決策は次のとおりです。

フォームが正常に送信されると、hide() FORM要素、およびshow()メッセージ（最初は非表示）だけになります。そして、後で、単にshow() FORM要素とhide()だけのメッセージ。

6
Šime Vidas

ええ、あなたが持っている方法はそれを行う方法です。 DOMはDIVの以前の状態を保存しないため、自分で保存する必要があります。

4
Rocket Hazmat

私の意見では、これを使用するのが最善です：

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

このように、これを繰り返し使用して、divを元の状態に復元しながら、「originalState」のデータをそのまま保持できます。私のために働いた。

3
Saurabh

ややエレガント？

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

基本的に3つのオプションがあります。

  1. 上記のoriginalState変数で行うように、元のマークアップを覚えておいてください。
  2. AJAX=を使用して、マークアップを再要求します。jQueryで$.ajax()メソッドを使用するサーバー側コードがある場合、これを簡単に行うことができます。
  3. ページをリロードします。
1
Devin Burke

JQueryでempty関数を呼び出すと実行されます

$(".div").empty();
0
Devraj Giri

これはこのサイトでの最初のやり取りです。まだコメントできませんが、これは@Josiah Ruddellの回答に対する@Fleuvのコメントです。

.clone()のデフォルトパラメータは「false」で、イベントリスナーを複製しません。 .clone(true)にすると、イベントリスナーも複製されます。私はそれを（彼の答えの残りで）テストしましたが、動作します。

w3schools jQuery clone（）メソッド

0
hypo644