2

これはおそらく非常に基本的なことですが、行き詰まっています...

ページの読み込み時に、要素の html コンテンツを変数に保存する必要があります。要素の html コンテンツを変更する他のコードがページに含まれています。そのため、値をデフォルト (ページの読み込み時) に戻すことができる必要があります。問題は、変数の値が最新の値に変更されていることです。

変数「スティック」に割り当てる初期値を作成するにはどうすればよいですか?

currentElementsHTML = $("#myDOMElement"),
currentElementsHTMLDefaultValue = currentElementsHTML.html()
... do stuff that changes currentElementsHTML 
... revert to currentElementsHTMLDefaultValue whenever i need to
4

4 に答える 4

3

データを保存して後で利用できるようにする方法はたくさんあります。その中には、JavaScript のスコープの仕組みに関する知識が必要なものもあれば、jQuery メソッドに依存しているだけのものもあります。

最初に頭に浮かぶこと

グローバル変数

これを行う悪い方法は、値をグローバル var として保存することです。

function at_the_start(){
   /// notice there is no var keyword, this means the variable will be global
   global_html = $('element').html();
}

function later_on(){
   $('element').html( global_html );
}

データが「グローバル名前空間を汚染する」ため、これを行うべきではありません。これは、基本的に、他のコードが変数に簡単にアクセスでき(そして変数をいじることができ)、他のコードのグローバル データを誤って上書きする可能性があることを意味します。特に、かなり一般的な変数名を使用する場合。

スコープ内に保持されるローカル変数

これを行うためのより良い方法は、JavaScript の機能、つまりそのスコープ機能を独自の目的で使用することです。ここで読むべきいくつかの良い点があります-JavaScript の変数のスコープとは何ですか? :

function my_code(){

  var html = $('element').html();

  /* Do stuff here */

  $('element').html( html );

}

上記は、ローカル変数と、すべてを同じ関数呼び出しに保持する必要があるという事実に依存しています。ユーザーがトリガーしたイベントの組み合わせに依存する可能性が最も高いため、実際には上記を使用することはできません。これは、さまざまな場所で多くの関数が使用され、すべてが同じローカル変数を共有できないためです。それともできますか？

以下は、私が「グローバルローカル」変数と呼んでいるものです - 完全に本当の名前ではない可能性が高いですが、私が見ているように物事を説明しています:

function my_code(){

  /// this variable is local, due to the var keyword
  /// but it will be accessible in both the functions below
  var html_local = '';

  var my_function_to_start = function(){
    html_local = $('element').html();
  }

  var after_other_things_have_happened = function(){
    $('element').html( html_local );
  }

  /// you can even apply these functions to say an event handler
  /// and the variable will be remembered because it exists within
  /// the "after_other_things_have_happened" function's scope.
  $('another.element').click(after_other_things_have_happened);

}

上記が機能するのは、JavaScript 関数が以前の親ブロック/親スコープまたは親関数で定義された変数に常にアクセスできるためです。

jQuery データ

jQuery を使用していることを考えると、jQuery は任意のデータを格納するための非常に単純な方法を提供し、スコープやローカル変数とグローバル変数について何も知る必要はありません。これを書くのにしばらく時間がかかったので、明らかにこの時までに、他のポスターは次が良い考えであると正しく述べています - jQuery Data :

$('element').data( 'old_html', $('element').html() );

これは、次を使用していつでもアクセスできます。

$('element').data( 'old_html' );

そう...

$('element').html( $('element').data( 'old_html' ) );

値を元に戻します - これは要素とともに保存されるため、アクセスできる場所ならどこでも$('element')、それに割り当てられたデータを取得できます。


その他の関連性の低い方法 (ただし、データ ストレージの方法)

オブジェクトのプロパティとして保存

もう 1 つの便利な機能は、JavaScript がほぼすべてのデータ型をオブジェクトとして扱うことです。これは、ほぼすべてのものにプロパティを追加できることを意味します。少し奇妙であれば、次のことは実際にはかなり可能です。

var a = new String('This is a string');
    a.withAProperty = 'another string';

alert(a);
alert(a.withAProperty);

私はときどきこれを使用して、次のように関数に疑似静的プロパティを作成します。

var my_function = function(){
  if ( ! my_function.staticProp ) {
    my_function.staticProp = 'abc';
  }
  /* use my_function.staticProp for something here */
}

var another_function(){
  /* you can also access my_function.staticProp here
     but only after my_function has been called once */
}

/* and my_function.staticProp here, but only 
   after my_function has been called once  */

これは、グローバル var を使用するのとほぼ同じ効果があります (特にグローバル関数に適用する場合) が、関数の名前空間の上に値が格納されることを意味し、他のコードとの衝突の可能性を大幅に削減します。これは、外部コードが var の内容に影響を与える可能性があることを意味します。これは、実際に何をしたいかによってはメリットになる可能性があります。

コンテンツを dom に保存する

保存したいものによっては、そのデータを DOM に記録すると便利な場合があります。これらの中で最も明白なのは、非表示の入力または非表示の要素にデータを書き込むことです。後者の利点は、たまたまマークアップ情報の形式をとっている場合でも(jQuery や document.getElementById などを使用して)このデータをナビゲートできることです (あなたのもののように)。これは、大量のデータを処理している場合、データの転送に関係する変数を確実に空にする限り、循環参照によって引き起こされるメモリ リークを回避するための有益な方法でもあります。

$.ajax('request_html.php').done(function(data){
  $('<div id="hidden_html" />').hide().html(data).appendTo('body');
  data = null;
  /// you only need mullify data if you were to have other
  /// sub/child functions within this callback, mainly being wary
  /// of closures - which are functions that are defined in a certain
  /// scope chain, but are then returned or put to use outside of
  /// that chain - i.e. like event listeners. 
  /// nullify vars and removing large properties is still good practice though.
});

次に、取得する場合：

$('#hidden_html').html();

そしてその間、これらの 2 つのポイントの間でデータをたどることができます。

$('#hidden_html h1 > a[name=first]');
于 2012-10-23T23:44:59.557 に答える
1

元のHTMLを同じDOM要素に関連付けると、元のHTMLが消えることはありません。

$("#myDOMElement").data("initial-html", $("#myDomElement").html());
于 2012-10-23T23:19:42.717 に答える
1

そのようなものですが、まだテストされていません：

$(function() {

  $('#id').data('store', $('#id').html());

});

...

$('#id').html(data('store'));
于 2012-10-23T23:21:16.187 に答える
0

設定して忘れてください。

の内容を変数にプッシュする.html()と、その変数で何かを実行して削除しない限り、変数はそこにとどまります。

var original = $("#foo").html(); // original HTML is now in 'origina'

変更しない限り、これは変更されません。

$ .data（）を使用して要素にデータを保存する

.dataただし、要素自体に（jQueryのメソッドを使用して）データとして保存する方が有利な場合があります。

var element = $("#foo");
element.data( "original", element.html() );

このようにして、後でいつでもアクセスできます。

console.log( element.data( "original" ) );

デモの記録、リセット、および復元：http: //jsfiddle.net/ft8M9/

多くのアイテムにも対応

// Access all elements to restore
var restore = $(".restore");

// Save original HTML, and set new HTML
restore.each(function(i,o){
    var that = $(this);
    that.data("original", that.html())
        .html("Changed " + i);
});

// After 2 seconds, restore original HTML, remove stored data
setTimeout(function(){
    restore.each(function(i,o){
        var that = $(this);
        that.html( that.data("original") )
            .removeData( "original" );
    });
}, 2000);

デモ： http： //jsfiddle.net/ft8M9/1/

于 2012-10-23T23:21:02.593 に答える