5

JavaScript の遅延バインディングは優れています。しかし、必要なときに早期バインドするにはどうすればよいでしょうか?

jQuery を使用して、ループ内のイベント ハンドラーとのリンクを div に追加しています。ループ内で変数「aTag」が変化します。後でリンクをクリックすると、すべてのリンクが「aTag」の最後の値である同じメッセージを警告します。すべてのリンクに別の警告メッセージをバインドするにはどうすればよいですか?

すべてのリンクは、イベント ハンドラーがクリックされたときではなく、イベント ハンドラーが追加されたときに「aTag」が持っていた値で警告する必要があります。

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    nextTag.click(function() { alert(aTag); });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}
4

3 に答える 3

4

bindメソッドにデータを渡すことができます。

nextTag.bind('click', {aTag: aTag}, function(event) {
    alert(event.data.aTag);
});

これにより のコピーが作成されるため、aTag各イベント ハンドラには異なる値が設定されます。あなたのユースケースはまさにこのパラメータがbind存在する理由です。

完全なコード:

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    nextTag.bind('click', {aTag: aTag}, function(event) {
      alert(event.data.aTag);
    });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}
于 2010-04-18T19:30:32.283 に答える
1

アラートするテキストをパラメーターとして受け取り、イベント ハンドラーを返すラッパー関数を作成することもできます。

function makeAlertHandler(txt) {
  return function() { alert(txt); }
}

そして交換

nextTag.click(function() { alert(aTag); });

と

nextTag.click(makeAlertHandler(aTag));
于 2010-04-18T19:39:14.493 に答える
-2

次のように、この変数のコピーを保持する必要があります。

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    var laTag = aTag;
    nextTag.click(function() { alert(laTag); });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

aTag変数はループするたびに変化し、ループの最後にはループの最後の項目として残されます。ただし、作成した各関数は、この同じ変数を指しています。代わりに、変数 per が必要なので、上記のようにローカル コピーを作成します。

チェーンを使用してこれを大幅に短縮することもできますが、問題はスコーピングと参照であるため、この場合は要点がぼやけているように感じます。

于 2010-04-18T19:29:11.277 に答える