动态更改图像的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）？

- Yandong Liu

---

img 函数内的匿名监听器指的是周围范围内的 var（它保存了最后分配的值：rating5）。尝试用 changeimg_color(this.id); 替换 changeimg_color(img); 或者只是将生成鼠标事件的图像 this 传递给 change* 函数，省略 e() 包装。 - jensgram

Answer 1

最简单的委托事件的方法... 通过这种方式，您不需要为每个元素添加监听器。

演示

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

- Givi

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

演示

为了更好地理解闭包，请阅读这篇文章

- code-jaff

Answer 3

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

- mohkhan

Answer 4

你可以在自定义函数中添加监听器：

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

演示

- sp00m