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

Fiddle Example。 注意请务必检查元素以查看src更改。

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

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

2 个答案: