私は div を持っていて、html()
その内容を変更していました。「キャンセル」ボタンをしているhtml()
のですが、元の値に戻したいです。
これを行う効率的な方法はありますか?コード全体を再び html() にしないようにしています。これは見栄えが悪く、おそらくベスト プラクティスではないからです。
よろしくお願いします。よろしく
私は div を持っていて、html()
その内容を変更していました。「キャンセル」ボタンをしているhtml()
のですが、元の値に戻したいです。
これを行う効率的な方法はありますか?コード全体を再び html() にしないようにしています。これは見栄えが悪く、おそらくベスト プラクティスではないからです。
よろしくお願いします。よろしく
// store the old content
var myOldContent = $("#cancelbutton").html();
// change content
$("#cancelbutton").html(someNewContent);
// and change it back
$("#cancelbutton").html(myOldContent);
.html
可能な限り、このようにコンテンツを切り替えるために使用しないでください。2 つの隣接するほぼ同一の要素 (1 つは古い HTML を使用し、もう 1 つは新しい HTML を使用) を使用し、 hidden
CSS クラスを作成display: none
して 2 番目の要素に割り当てます。hidden
次に、このクラスを両方の要素で同時に切り替えます。
HTML:
<button class="cancel" id="cancel-original">Cancel</button>
<button class="cancel hidden" id="cancel-second">Cancelling...</button>
CSS:
.hidden {
display: none;
}
JQuery:
$('button.cancel').click(function() {
$('button.cancel').toggleClass('hidden'); // toggles both at once
});
jQuery の data() 関数を使用すると、元の値を内部で簡単に保持してから、次のように復元できます。
$('#a').click(function(){
$('div').data('store',$('div').html()).html('foo');
});
$('#b').click(function(){
$('div').html($('div').data('store'));
});
jsFiddle の例。(この例は、data() を使用して値を格納する方法を説明するためのものであり、プロダクション コードを対象としたものではないことに注意してください。)
作成時にjQueryを使用してクローンを作成し、キャンセルするときにそれを削除して古いバージョンをクローンして戻すことができます.
ブラウザは元の値を追跡しません。
ただし、ページの読み込み時に元の HTML を自分で変数に格納できます。
以前の HTML コンテンツを変数に保存し、キャンセル時にその変数から復元できます。
var previousHtml = $('#someElement').html();
それで
$('#someElement').html(previousHtml);
変更する前に、変数に保存する必要があります。
<script>
var origHTML = $("#divid").html();
function ResetDiv(){
$("#divid").html(origHTML);
}
</script>