1

クリックイベントで2つのdivの2つの画像を交換しようとしているため、22a.jpgがdiv#secondになり、22b.jpgがdiv#firstになりますが、「スワップ」ボタンをクリックするたびにこれが表示されますFirebug のエラー: imgArray[2].src is undefined。Chrome 17.0.963.2 および IE 8.0 でコードを実行しようとしましたが、エラーなく正常に動作します。Firefox 11.0 を使用しています

HTML

<body>
    <div id = "first" class = "thumbnail">
        <img class = "thumbsize" src = "22a.jpg" />
    </div>
    <div id = "second" class = "thumbnail">
        <img class = "thumbsize" src = "22b.jpg" />
    </div>
    <input type = "button" id = "swap" value = "swap" />
</body>

JS

<script type = "text/javascript">
    document.getElementById("swap").onclick = function(){
        if(document.images){
            var imgArray = document.images;
            imgArray[2] = new Image();
            imgArray[2].src = imgArray[0].src;
            imgArray[0].src = imgArray[1].src;
            imgArray[1].src = imgArray[2].src;
        }
    };
</script>
4

4 に答える 4

4

document.imagesFirefoxでは読み取り専用です（仕様へのリンク）。document.images新しいイメージを作成することはできますが、アレイに追加することはできません。

画像スワッピングを実行するためのより良い方法は、次のようになります。

document.getElementById("swap").onclick = function(){
    if(document.images){
        var imgArray = document.images;
        var tempSrc = imgArray[0].src;
        imgArray[0].src = imgArray[1].src;
        imgArray[1].src = tempSrc;
    }
};
于 2012-05-12T23:01:05.863 に答える
1

HTML には 2 つの画像しかないため、imgArray[2] は定義されていません。一時変数を使用して、他のイメージを交換します。

于 2012-05-12T23:00:32.010 に答える
0

ある種の準備ができている機能に入れてみましたか？

于 2012-05-12T22:50:03.817 に答える
0 
$('button#swap').toggle(function() {
$("div#first > img").attr('src','22b.jpg');
$("div#second > img").attr('src','22a.jpg');
}, function() {
$("div#first > img").attr('src','22a.jpg');
$("div#second > img").attr('src','22b.jpg');
});

このようなものはあなたのために働くでしょうか？

于 2012-05-12T23:13:55.710 に答える