Javascript 循环调用函数
Javascript Loop to Call a Function
试图找出 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;}
}
请指教,在此先感谢您的帮助!
getElementById
只有 returns 一个元素,因为 ID 应该是唯一的。
相反,为每个元素添加一个 class,并通过 class 添加 select。回调可以依赖于 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;
}
}
如前所述,getElementById return只有一个元素。
以下内容可能对您有所帮助:
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);
}
}
试图找出 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;}
}
请指教,在此先感谢您的帮助!
getElementById
只有 returns 一个元素,因为 ID 应该是唯一的。
相反,为每个元素添加一个 class,并通过 class 添加 select。回调可以依赖于 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;
}
}
如前所述,getElementById return只有一个元素。
以下内容可能对您有所帮助:
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);
}
}