1

我试图在点击事件时交换两个 div 中的两个图像，以便 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.images在 Firefox 中是只读的（链接到规范）。您可以创建新图像，但不能将其附加到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 中只有两个图像，因此未定义 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 回答