0

他の質問でわからない場合は、私は独学の初心者です。jsコードの一部を統合しようとしています。クラスa0とa1の2つのdivがあります。それぞれにmouseenterイベントを添付したい（同じイベント）。

これが私のフィドルです。これは（うまくいけば）自明です。.a0と.a1は私の元のコードであり、.f0と.f1は私の（失敗した）統合の試みを表しています。「for」ループを実行できないのはなぜですか（または、可能であれば、常に「2」の値で終わるのはなぜですか？）？

（jqueryでそれを実行できる方法があれば、それで問題ありません）

完全なデモについては、上記のフィドルを参照してください。

$(".a0").on("mouseenter",function(){
        $(this).html("value: 0");
});
$(".a1").on("mouseenter",function(){
        $(this).html("value: 1");
});

/* my failed attempt to consolidate the above code */
for (var i=0; i<2; i++){ 
    $(".f"+i).on("mouseenter",function(){
        $(this).html("value: "+ i);
    });
}
4

2 に答える 2

3

クイック＆ダーティ

$(".a0, .a1").on("mouseenter",function(){
  $(this).html("value: " + ($(this).hasClass('a0') ? 0 : 1));
});

よりエレガント

より洗練された方法で質問を解決するために、まずコードが機能しない理由を理解しましょう。

iの値を読み込む2つのコールバックを定義しています。

ただし、マウスが要素に入るとき、iはすでに2に設定されています。

これを防ぐためにクロージャーを使用できます：

for (var i=0; i<2; i++){ 
  (function(j) {
    $(".f"+i).on("mouseenter",function(){
      $(this).html("value: "+ j);
    });
  })(i);
}

この場合、iの値はjにキャプチャされ、コールバックが呼び出されても変更されません。

これがワーキングフィドルです

于 2013-03-23T19:17:59.687 に答える
1

問題は、iが参照であり、ハンドラーが呼び出されるまでに===2であるということです。

var assignME = function (i) {
    $(".f"+i).on("mouseenter",function(){
        $(this).html("value: "+ i);
    });
};

for (var i=0; i<2; i++){
    assignME(i);
}
于 2013-03-23T19:23:30.560 に答える