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

Image swap won't work in Firefox but works in Chrome and IE

本文关键字：Chrome IE 有效 但在 不起作用 交换 Firefox 图像      更新时间：2023-09-26

我试图在点击事件时交换两个div中的两个图像，以便22a.jpg最终出现在div#second和22b.jpg最终出现在div#first中，但是每次我单击"交换"按钮时，我都会在Firebug中收到此错误：imgArray[2].src是未定义的。我尝试在Chrome 17.0.963.2和IE 8.0中运行代码，它工作正常，没有错误。我正在使用火狐 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>
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;
    }
};

你的 HTML 中只有两张图片，所以没有定义 imgArray[2]。使用临时变量交换其他图像。

您是否尝试过将其放入某种就绪函数中？ 

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

这样的东西对你有用吗？

相关文章：