44

フォームを含む DIV があります。ユーザーがフォームを送信し、それが正常に送信されたら、フォームを単純な「すべて問題ありません」というメッセージに置き換えます。

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

到着したHTMLに従って、divを「元の状態」に「リセット」する良い方法はありますか? 私は実際にこのようなことをすることしか考えられません:

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

あまりエレガントに見えません - これにはもっと良い解決策があるのではないでしょうか?

4

10 に答える 10

92

コンテンツを保存する代わりに、要素を複製します。次に、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
于 2011-04-05T19:57:43.680 に答える
21

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

$('#some_div').data('old-state', $('#some_div').html());
$('#some_div').html($('#some_div').data('old-state'));
于 2011-04-05T19:56:44.023 に答える
5

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

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

于 2011-04-05T20:02:39.487 に答える
4

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

于 2011-04-05T19:55:36.200 に答える
3

もう少しエレガント？

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState);
于 2011-04-05T19:59:51.490 に答える
2

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

  1. originalState上記の変数の場合と同様に、元のマークアップを覚えておいてください。
  2. AJAX を使用してマークアップを再リクエストします。$.ajax()jQueryのメソッドを使用するサーバー側コードがある場合は、これを簡単に行うことができます。
  3. ページをリロードします。
于 2011-04-05T19:56:41.103 に答える