0

配列を使用していくつかの画像を作成し、各画像に関数をアタッチしたいと思います。私はjavascriptを初めて使用します。構文エラーが多い可能性がありますので、訂正していただければ幸いです。これが私のコードです。私と私のTAはこれに何時間も取り組みましたが、それでも機能させることはできません。誰かがこれについて手がかりを持っていますか？

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 に答える