5

マウスオーバー/マウスアウトで画像のsrcを動的に変更するための非常に単純なコードを書いています:

   function e(id) {
     return document.getElementById(id);
   }

   function changeimg_bw(ele) {
      e(ele).src='rating_bw.png';
   }

   function changeimg_color(ele) 
      e(ele).src='rating_color.png';
   }

   for(var i=1;i<=5;i++) {
     var img ='rating'+i;
     e(img).addEventListener('mouseover', function(event) {
          changeimg_color(img);
     });
     e(img).addEventListener('mouseout', function(event) {
          changeimg_bw(img);
     });
   }

アイデアは非常に単純です。画像の配列を使用して、評価バーをシミュレートします。また、一部の画像がマウスポインターで覆われると、色が変わるはずです(理想的には、以前のすべての画像を含めて色を変える必要がありますが、そこに到達する前に行き詰まりました)。私の質問は、任意の画像にカーソルを合わせると、最後の画像だけが色を変えることです (「rating5」)。i == 5 そのイベントリスナーが他のすべてのイベントリスナー (i=1,2,3,4) を上書きしたときのように見えますか?

4

4 に答える 4

2

JavaScript にはブロック スコープではなく関数スコープがあるためimg、匿名リスナー関数内の は最後の値を参照します。
これは、リスナーを次のようなプライベート クロージャーで囲むだけで解決できます。

for (var i = 1; i <= 5; i++) {
    var img = 'rating' + i;
    (function (img) {
        e(img).addEventListener('mouseover', function (event) {
            changeimg_color(img);
        });
        e(img).addEventListener('mouseout', function (event) {
            changeimg_bw(img);
        });
    })(img);
}

デモ

クロージャーについてよりよく理解するには、これを読んでください

于 2013-07-09T08:05:48.650 に答える
2

イベントをデリゲートする最も簡単な方法...そのような方法では、要素ごとにリスナーを追加する必要はありません

ライブデモ

var parent = document.getElementById("rating1").parentNode;

parent.addEventListener("mouseover", changeimg_color, false);
parent.addEventListener("mouseout", changeimg_bw, false);

function changeimg_bw(e) {
    if (e.target.nodeName.toLowerCase() === "img") {
        e.target.src='rating_bw.png';
    }
    e.stopPropagation();
    e.preventDefault();
}

function changeimg_color(e) {
    if (e.target.nodeName.toLowerCase() === "img") {
        e.target.src='rating_color.png';
    }
    e.stopPropagation();
    e.preventDefault();
}
于 2013-07-09T07:39:36.940 に答える
1

カスタム関数にリスナーを追加するだけです。

function addImgListeners(img) {
    e(img).addEventListener('mouseover', function(event) {
        changeimg_color(img);
    });
    e(img).addEventListener('mouseout', function(event) {
        changeimg_bw(img);
    });
}

それで:

for(var i=1; i<=5; i++) {
    var img = "rating" + i;
    addImgListeners(img);
    // or even addImgListeners("rating" + i);
}

デモ

于 2013-07-09T07:45:11.057 に答える
1

JS では、実行時に任意のオブジェクトにプロパティを追加できます。この動作を使用すると、次のようなことができます...

for(var i=1;i<=5;i++) {
    var img ='rating'+i;
    e(img).index = i;
    e(img).addEventListener('mouseover', function(event) {
        changeimg_color("rating" + event.target.index);
    });
    e(img).addEventListener('mouseout', function(event) {
        changeimg_bw("rating" + event.target.index);
    });
}
于 2013-07-09T07:39:43.520 に答える