我正在编写一些非常简单的代码,以在鼠标悬停/移开时动态更改图像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)?
img
函数内的匿名监听器指的是周围范围内的var
(它保存了最后分配的值:rating5
)。尝试用changeimg_color(this.id);
替换changeimg_color(img);
或者只是将生成鼠标事件的图像this
传递给change*
函数,省略e()
包装。 - jensgram