如何在JavaScriptonMouseCenter中用id交换src？

我希望在使用javascript将鼠标移到上方时更改图像。img src应与ids交换。问题是循环出了问题，当我运行这个循环时，它将交换图像，但只交换图像“images/h6.jpg”。所以这三张照片都是一样的

HTML:

图像翻转

Javascript:

var $ = function (id) { 
    return document.getElementById(id); 
}
//ONLOAD EVENT HANDLER      
window.onload = function () {

    //GET IMAGE TAGS
    var listNode = $("image_rollovers");
    var imageList = listNode.getElementsByTagName("img");

    //PROCESS EACH IMAGE
    var i, imageNode, image;
    for ( i = 0 ; i < imageList.length ; i++ ){

        //1. GET IMG TAG
        imageNode = imageList[i];

        //2. PRELOAD IMAGE FROM IMG TAG
        image = new Image();
        image.src = imageNode.getAttribute("id");

        //3. ATTACH EVENT HANDLERS (onmouseover & onmouseout) TO IMG TAG
        imageNode.onmouseenter = function (evt) {
            var img = this;
            img.src = imageNode.getAttribute("id");

            if (!evt) evt = window.event;
            if( evt.preventDefault ) {
                evt.preventDefault();
            } else {
                evt.returnValue = false;
            }
        }

    }
}

var$=函数（id）{
返回文档.getElementById（id）；
}
//ONLOAD事件处理程序
window.onload=函数（）{
//获取图像标签
var listNode=$（“图像滚动”）；
var imageList=listNode.getElementsByTagName（“img”）；
//处理每个图像
变量i，图像节点，图像；
对于（i=0；i

原因是

imageNode.getAttribute（“id”）将是每个项目的相同值。因此，它在每次迭代中都会发生变化，因此在每个事件处理程序上只使用最后一个值。这就是为什么它只适用于最后一个图像。而是使用
img.src=this.getAttribute（“id”）
，因此我们使用触发事件的特定元素的
id

imageNode.onmouseenter = function (evt) {
    var img = this;
    img.src = this.getAttribute("id");
    ...
}

。注意：确保检查元件以查看
src
的变化。


不要使用
ID
存储任意数据，而是使用
data-*
属性





无需等待window.onload
不要在循环中创建函数（覆盖值的问题）


函数$（id）{
返回文档.getElementById（id）；
}
var listNode=$（“图像滚动”）；
var imageList=listNode.getElementsByTagName（“img”）；
变量i，图像节点，图像；
//（不要在循环内生成fn）
函数swapSrc（）{
this.src=this.dataset.src；
}
对于（i=0；就是它，谢谢！我的教科书在循环中具有类似onclick事件的功能。我应该远离它的任何特殊原因？@user2400244这里解释得很好：-您会认识到您所面临的确切问题-覆盖值输出。。
imageNode.onmouseenter = function (evt) {
    var img = this;
    img.src = this.getAttribute("id");
    ...
}

 <img src="images/h1.jpg" data-src="images/h4.jpg" alt="">

function $(id) { 
  return document.getElementById(id); 
}

var listNode  = $("image_rollovers");
var imageList = listNode.getElementsByTagName("img");
var i, imageNode, image;


// (Don't make fn inside loops)
function swapSrc() {
  this.src = this.dataset.src;
}


for (i=0 ; i<imageList.length; i++) {

  imageNode = imageList[i];
  //PRELOAD
  image = new Image();
  image.src = imageNode.dataset.src;
  // Attach mouseenter listener
  imageNode.addEventListener("mouseenter", swapSrc, false);
}