Javascript循环调用函数

Question

试图找出onmouseover，onmouseout和onclick与几个图片都具有相同的ID标记。要做到这一点，我知道我需要一个.length循环。

此代码作品，未经长度环......

window.onload = setPictures; 
function setPictures() { 
    var img = document.getElementById("pictureBox"); 
     img.onmouseover = mouseOverImage; 
     img.onmouseout= mouseOutImage; 
} 
function mouseOverImage() { 
    var img = document.getElementById("myImg"); 
    img.style.opacity = .5; 
} 
function mouseOutImage() { 
    var img = document.getElementById("myImg"); 
    img.style.opacity = 1; 
} 

这是循环的功能，我试图不工作。

window.onload = setPictures; 
function setPictures() { 
    var img = document.getElementById("pictureBox"); 
    for (var i=0; i<img.length; i++) {  
     img[i].onmouseover = mouseOverImage; 
     img[i].onmouseout= mouseOutImage;} 
} 

请指教，并提前感谢您的帮助！

Answer 1

getElementById只返回一个元素，因为ID应该是唯一的。

相反，向每个元素添加一个类并按类选择它们。回调可以依靠this的情况下为你的鼠标事件：

function mouseOverImage() { 
    this.style.opacity = .5; 
} 
function mouseOutImage() { 
    this.style.opacity = 1; 
} 

window.onload = function setPictures() { 
    var imageCollection = document.getElementsByClassName('pictureBox'); 
    for (var i=0; i < imageCollection.length; i++) {  
     imageCollection[i].onmouseover = mouseOverImage; 
     imageCollection[i].onmouseout = mouseOutImage; 
    } 
} 

Answer 2

正如有人说，返回的getElementById只有一个元素。
这可以帮助你：

window.onload = setPictures; 
    function setPictures() { 
     var img = document.getElementById("pictureBox0"); 
     for (var i=1; img != null; i++) {  
      img.onmouseover = mouseOverImage; 
      img.onmouseout= mouseOutImage; 
      img = document.getElementById("pictureBox"+i); 
     } 
    }