如何在JavaScript onmouseenter中用ID交换src？

Question

I want the image to change when I mouse over using javascript. 我希望使用javascript鼠标悬停时图像发生变化。 The img src should be swapped with the ids. img src应该与id交换。 The problem is that something is going wrong with the loop and when I run this, it will swap the images but only with image "images/h6.jpg". 问题是循环出了问题，当我运行它时，它将交换图像，但仅交换图像“ images / h6.jpg”。 So all three have the same pic. 因此，这三个都具有相同的图片。

HTML: 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: 使用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;
            }
        }

    }
}

Answer 1

The reason is because imageNode.getAttribute("id"); 原因是因为imageNode.getAttribute("id"); will be the value the same value for each item. 每个项目的值将是相同的值。 Hence it changes on each iteration so only has the last value is used on each event handler. 因此，它在每次迭代中都会更改，因此每个事件处理程序仅使用最后一个值。 This is why it only works for the last image. 这就是为什么它仅适用于最后一张图像的原因。 Rather use img.src = this.getAttribute("id") so we are using the specific element's id that is having the event triggered. 而是使用img.src = this.getAttribute("id")因此我们使用触发事件的特定元素的id 。

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

Fiddle Example . 小提琴的例子 。 Note make sure to inspect the elements to see the src changes. 请注意，请确保检查元素以查看src更改。

Answer 2

jsBin demo jsBin演示

Don't use ID to store arbitrary data, use data-* attribute instead. 不要使用ID存储任意数据，而应使用data-*属性。

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

No need to wait for the window.onload. 无需等待window.onload。
Don't create functions within loops (Issue with overwriting values) 不要在循环内创建函数（覆盖值的问题）

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

如何在JavaScript onmouseenter中用ID交换src？

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-10-07 04:24:05

解决方案2
1 2015-10-07 04:27:06

如何在JavaScript onmouseenter中用ID交换src？

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-10-07 04:24:05

解决方案2 1 2015-10-07 04:27:06

解决方案1
2 已采纳 2015-10-07 04:24:05

解决方案2
1 2015-10-07 04:27:06