5

我正在编写一些非常简单的代码来动态更改 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'）。看起来当 i == 5 它的事件监听器覆盖了所有其他事件监听器（i = 1,2,3,4）？

4

4 回答 4

2

委托事件的最简单方法...这样您就不需要为每个元素添加侦听器

现场演示

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();
}
于 2013-07-09T07:39:36.940 回答
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);
}

演示

为了更好地理解闭包阅读这个

于 2013-07-09T08:05:48.650 回答
1

在 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);
    });
}
于 2013-07-09T07:39:43.520 回答
1

您可以简单地在自定义函数中添加您的侦听器：

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

演示

于 2013-07-09T07:45:11.057 回答