Question

我正在编写一些非常简单的代码，以便在mouseover / mouseout上动态更改图像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'）。看起来我= = 5它的eventlistener覆盖了所有其他eventlistener（i = 1,2,3,4）？

Answer 1

委派事件的最简单方法......以这种方式，您不需要为每个元素添加侦听器

Live Demo

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

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

DEMO

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

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

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

Demo

动态更改图像src的javascript

4 个答案: