0

我想使用数组来创建一些图像，并为每个图像附加一个函数。我是 javascript 新手，可能有很多语法错误，我们将不胜感激。下面是我的代码。我和我的助教为此工作了几个小时，但仍然无法成功，有人知道吗？

function changeImage() {
    var i = 0;
    element = document.getElementById(myimage[i]); // here I want it call every id or content in that array.
    if (element.src.match("bulbon")) {
        element.src = "pic_bulboff.gif";
    }
    else {
        element.src = "pic_bulbon.gif";
    }
}

var myimage = new Array();
myimage[0] = 0;
myimage[1] = 1;
myimage[2] = 2;

for (var i = 0; i < myimage.length;) {
    document.write("<img id=\"myimage[i]\" src=\"pic_bulboff.gif\" onmouseover=\"changeImage()\" width=\"20\" height=\"36\" />");
    i++; //in the img id=myimage[i] part, I want give each image I created a unique id, so my function can work on each image.
}​
4

1 回答 1

0

您的图像根本不需要 id 属性来使用changeImage()您显示的功能，因为它似乎只是试图交换具有mouseover事件的图像的图像源。您可以改为使用this关键字来获取对“当前”图像的引用。

for (var i = 0; i < 400; i++) {
    document.write("<img src=\"pic_bulboff.gif\" onmouseover=\"changeImage(this)\" width=\"20\" height=\"36\" />");
}​

function changeImage(element) {
    if (element.src.indexOf("bulbon")!=-1) {
        element.src = "pic_bulboff.gif";
    }
    else {
        element.src = "pic_bulbon.gif";
    }
}

请注意，该.match()方法通常与正则表达式一起使用，以返回与正则表达式匹配的源字符串部分的数组，但如果您只想测试您的字符串是否与正则表达式匹配，而不担心究竟匹配的是什么，那么您应该使用.test()- 或者在你的情况下，因为你根本没有使用正则表达式，所以使用.indexOf().

如果你想让一个函数能够处理你所有的图像，你应该给它们一个公共类，然后使用.getElementsByClassName()方法：

for (var i = 0; i < 400; i++) {
    document.write('<img class="someClass" src="pic_bulboff.gif" onmouseover="changeImage(this)" width="20" height="36" />');
}​

function someFunction() {
    var elements = document.getElementsByClassName("someClass");
    for (var i = 0; i < elements.length; i++) {
        // do something with elements[i]
    }
}

请注意，如果字符串是用单引号引起来的，则不需要用反斜杠转义字符串文字中的所有双引号。

编辑 - 回应评论：

上面的代码绝对有效，你可以在这里看到：http: //jsfiddle.net/E5TGy/

关于使其与数组一起使用的“正确”方法，整个概念不适合这个问题。有一个数组没有意义，其中存储在索引中的值i 就是 i你的方式 - 如果查找myimage[7]给你7有什么意义？最接近你的代码的东西是这样的：

document.write('<img id="' + myimage[i] +
               '" src="pic_bulboff.gif" onmouseover="changeImage(' + myimage[i] + 
               ')" width="20" height="36" />');

...然后您的功能将是：

function changeImage(elementID) {
    var element = document.getElementById(elementID);
    if (element.src.match("bulbon")) {
        element.src = "pic_bulboff.gif";
    }
    else {
        element.src = "pic_bulbon.gif";
    }
}

如图所示：http: //jsfiddle.net/qKksU/

于 2012-11-20T05:04:14.677 回答