フォームを含む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);
見た目はエレガントではありません-これにはもっと良い解決策があると思いますか?
コンテンツを保存する代わりに、要素を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
データ属性を使用して、変数ではなく状態を保存できます
$('#some_div').data('old-state', $('#some_div').html());
$('#some_div').html($('#some_div').data('old-state'));
あなたがしていることは最適ではありません。最善の解決策は次のとおりです。
フォームが正常に送信されると、hide()
FORM要素、およびshow()
メッセージ(最初は非表示)だけになります。そして、後で、単にshow()
FORM要素とhide()
だけのメッセージ。
ええ、あなたが持っている方法はそれを行う方法です。 DOMはDIVの以前の状態を保存しないため、自分で保存する必要があります。
私の意見では、これを使用するのが最善です:
var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState.clone());
このように、これを繰り返し使用して、divを元の状態に復元しながら、「originalState」のデータをそのまま保持できます。私のために働いた。
ややエレガント?
var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState);
基本的に3つのオプションがあります。
originalState
変数で行うように、元のマークアップを覚えておいてください。$.ajax()
メソッドを使用するサーバー側コードがある場合、これを簡単に行うことができます。JQueryでempty
関数を呼び出すと実行されます
$(".div").empty();
これはこのサイトでの最初のやり取りです。まだコメントできませんが、これは@Josiah Ruddellの回答に対する@Fleuvのコメントです。
.clone()
のデフォルトパラメータは「false」で、イベントリスナーを複製しません。 .clone(true)
にすると、イベントリスナーも複製されます。私はそれを(彼の答えの残りで)テストしましたが、動作します。