动态更改图像src的javascript

Question

我正在编写一些非常简单的代码来在鼠标悬停/鼠标移出时动态更改图像 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)？

Answer 1

由于 javascript 没有 block 作用域而是函数作用域，因此匿名监听器函数中的 img 将引用最后一个值。
您可以通过简单地将监听器封装到私有(private)闭包中来解决这个问题，例如

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);
}

DEMO

为了更好地理解闭包，请阅读 this