文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在javascript onmouseenter中与id交换src？

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

Stack Overflow用户

提问于 2015-10-07 04:09:37

回答 2查看 80关注 0票数 2

当我用javascript鼠标移动时，我希望图像发生变化。img应该与ids交换。问题是循环出了问题，当我运行这个循环时，它将交换图像，但只交换图像“映像/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

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-10-07 04:24:05

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

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

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

票数 2

Stack Overflow用户

发布于 2015-10-07 04:27:06

http://jsbin.com/pecijo/1/edit?html,css,js,console,output

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32983666

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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