调用函数的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

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

而是，向每个元素添加一个类，然后按类选择它们。 对于您的鼠标事件，回调可以依赖于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);
       }
     }