jquery - 反復しないループ内のjquery関数

Question

コードに問題があります。からまでのすべての値を表示するのではなく、属性のみtitleが表示されます。なぜこれは誰が私が間違っていることを提案できるのでしょうか???16115

マイコード

 x=1;
 while(x <= 15)
 {
     $("td#id"+x).mouseover(function(x){
     $(this).attr('title', x)           
   });
   x++;
}

score 9 · Accepted Answer

これは、「コールバックでループ変数を使用する」という非常に一般的な問題です。

jQuery を使用しているため、最も簡単な修正はdataハンドラーへのパラメーターです。

 var x=1;
 while (x <= 15) {
     $("td#id"+x).mouseover({ x: x }, function(ev) {
         this.title = ev.data.x;        
     });
     x++;
 }

とはいえ、なぜこれをmouseover関数でのみ設定するのですか? タイトルは要素に直接、1 回だけ追加する必要があります。

for (var x = 1; x <= 15; ++x) {
    document.getElementById('id' + x).title = x;
}

ハンドラーで実行してmouseoverも実際には何も壊れませんが、あるセルから別のセルに移動するたびに何度も呼び出される (および DOM を更新する) イベントハンドラーを登録したことを意味します。

score 1 · Accepted Answer

イベントハンドラーとしてjqueryに提供する関数は、それが定義された外部ブロックとその（生きている）変数へのポインターを保持します。それが閉鎖の仕組みです。

したがって、実行時の x は 15 です。

ほとんどの JavaScript 開発者はそれがどのように機能するかを知りませんが、知っておくと非常に興味深いことです: http://jibbering.com/faq/notes/closures/

編集：ここでは、コールバックが実際にはまったく役に立たないという事実をAlnitakが指摘したように、追加するつもりだった通常の修正をここでは追加しません;）

2 に答える 2