如何在javascript onmouseenter中将src与id交换？答案

【问题标题】：How to swap src with id in javascript onmouseenter?如何在javascript onmouseenter中将src与id交换？
【发布时间】：2016-01-04 04:18:24
【问题描述】：

当我使用 javascript 将鼠标悬停时，我希望图像发生变化。 img src 应该与 id 交换。问题是循环出了点问题，当我运行它时，它将交换图像，但仅与图像“images/h6.jpg”交换。所以这三个都有相同的图片。

HTML：

<body>
<section>
    <h1>Image Rollovers</h1>
    <ul id="image_rollovers">
        <li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li>
        <li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li>
        <li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
    </ul>        
</section>

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

    }
}

【问题讨论】：

标签： javascript html

【解决方案1】：

原因是因为imageNode.getAttribute("id"); 的值将与每个项目的值相同。因此它在每次迭代中都会发生变化，因此每个事件处理程序只使用最后一个值。这就是为什么它只适用于最后一张图片。而是使用img.src = this.getAttribute("id")，所以我们使用触发事件的特定元素的id。

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

Fiddle Example。 请注意确保检查元素以查看 src 更改。

【讨论】：

就是这样，谢谢！

【解决方案2】：

jsBin demo

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

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

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

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

【讨论】：

我的教科书有一个循环内类似 onclick 事件的功能。有什么特别的理由我应该远离它吗？
@user2400244 在这里解释得很好：jslinterrors.com/dont-make-functions-within-a-loop - 你会认识到你所面临的确切问题 - 覆盖值输出..