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

Question

我希望使用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;
            }
        }

    }
}

Answer 1

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

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

小提琴的例子 。 请注意，请确保检查元素以查看src更改。

Answer 2

jsBin演示

不要使用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);
}

如何在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