マウスオーバー/マウスアウトで画像の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) を上書きしたときのように見えますか?