Question

我正在尝试在点击事件中交换两个div中的两个图像，以便22a.jpg最终在div＃second和22b.jpg结束于div＃first，但每次我点击“swap”按钮我在Firebug中收到此错误： imgArray [2] .src未定义。我试图在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>

Answer 1

document.images只读取在Firefox（link to specification）中。您可以创建新图像，但不能将其附加到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;
    }
};

Answer 2

HTML中只有两个图像，因此未定义imgArray [2]。使用temp var交换其他图像。

Answer 3

您是否曾尝试将其置于某种ready - 函数中？

Answer 4

$('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');
});

这样的事情对你有用吗？

图像交换在Firefox中不起作用，但适用于Chrome和IE

4 个答案: