的JavaScript动态改变图片src

我正在写一些非常简单的代码来动态改变鼠标悬停/鼠标移开图片src：的JavaScript动态改变图片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（我= 1,2,3,4）？委托事件......以这样的方式

来源

2013-07-09 Yandong Liu

'匿名侦听器函数内img'指' （包含最后一个赋值：'rating5'）。尝试用'changeimg_color（this.id）'替换'changeimg_color（img）;'或者只传递'this'（图像产生鼠标事件）到'change *'函数省略'e（）'wrappe河 – jensgram

由于JavaScript没有b锁定范围但功能范围内，匿名侦听器函数中的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

来源

2013-07-09 08:05:48

这完全解决了我的问题。谢谢！ –

最简单的方法，你就不需要每个元素

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

来源

2013-07-09 07:39:36 Givi

添加监听器在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-09 07:39:43 mohkhan

你可以简单地在一个自定义函数添加你的听众：

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

来源

2013-07-09 07:45:11 sp00m

的JavaScript动态改变图片src

回答

相关问题