2

可変数のオブジェクトを含む xml を読み取ることにより、Web ページのコード サイズを削減しようとしています。JavaScript コードでは、各オブジェクトを保持する配列を作成し、xml データをループ処理して各オブジェクトを作成します。

xml ノードの数をループして、その数のオブジェクトとオブジェクト関数 (mouseover、onclick など) を作成しますが、関数では同じインデックス変数を使用して現在のオブジェクト プロパティにアクセスしますが、関数が実際にそのインデックスと呼ばれる場合変数はもはや私の範囲内ではありません。

呼び出し元のオブジェクトのキー (インデックス) 値を取得できる方法はありますか?

for(index=0, index < scenes.length; index+=1)
{
 this.thumbs[index] = document.createElement('div');
//setup more properites
this.thumbs_image[index] = document.createElement('img');
//more setup
this.thumbs[index].onmouseover = function(){
me.thumbs_image[index].src = scenes[index].attributes.getNamedItem("src").nodeValue;     //THIS IS THE PROBLEM - WHEN the function is actually called index is no longer the correct index of the array element
}
}

関数 onmouseover の外側のコードは機能し、onmouseover 内でインデックスをハードコーディングすると機能します。

パラメータとして渡されたインデックスを使用して別の関数を作成しようとしましたが、関数を動的に割り当てると、別の方法を考えることができず、これも機能しないため、インデックスを使用して割り当てます。

this.thumb[index].onmouseover = myFunction(index);

myFunction=function(i){
me.thumbs_image[i].src = scenes[i].attributes.getNamedItem("src").nodeValue;
}

onmouseover 内でそれを呼び出している要素のキーを取得する方法はありますか?

私が見落としている明らかな解決策があることを願っています-どんな助けも大歓迎です!

ありがとう！

4

1 に答える 1

0

最初の解決策：これを置き換えます：

this.thumbs[index].onmouseover = function(){
  me.thumbs_image[index].src = scenes[index].attributes.getNamedItem("src").nodeValue;
}

これとともに：

this.thumbs[index].onmouseover = (function(i) {
  return function() {
    me.thumbs_image[index].src = scenes[index].attributes.getNamedItem("src").nodeValue;
  };
})(i);

関数ラッパーはクロージャ内の変数の値をキャプチャするため、ハンドラーが呼び出されたときにi（存在しない変数ではなく）その値にアクセスできます。i

2番目の解決策:( onmouseoverおよび他のすべてのイベントハンドラー）は、イベントである1つの引数を受け取ります。イベントは、それがどこで発生したかを知っています。これを試して：

this.thumbs[index].onmouseover = function(evt) {
  console.log(evt.target);
}

この特定のケースでは2番目のソリューションをお勧めしますが、最初のソリューションのパターンを知っておくことが重要です。ループ内でループカウンターに直接依存する関数を作成するのではなく、代わりにループカウンターの値をキャプチャする関数呼び出しを常に用意してください。 。

于 2012-12-03T02:28:51.717 に答える