圖像交換在Firefox中不起作用，但在Chrome和IE中可用

我試圖在兩個div上交換兩個圖像，因此22a.jpg以div＃second結尾，22b.jpg結束於div＃第一次，但每次我點擊「交換」按鈕，我在Firebug中得到這個錯誤：imgArray [2] .src未定義。我試圖在Chrome 17.0.963.2和IE 8.0中運行代碼，並且沒有錯誤就可以正常工作。我使用的是Firefox 11.0圖像交換在Firefox中不起作用，但在Chrome和IE中可用

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>

<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>

來源

2012-05-12 Tifa

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; 
    } 
};

來源

2012-05-12 23:01:05 mgiuffrida

感謝啓蒙和代碼作品像魅力。 – Tifa

你試過把它在某種ready - 功能的？

來源

2012-05-12 22:50:03

還沒有。給我一分鐘，我會盡快回復你 – Tifa

它不工作 – Tifa

好吧，你可以嘗試將src保存在一個變量中，而不是創建一個新的圖像。只是想給你一些關於接下來要做什麼的想法。 –

您的HTML中只有兩個圖像，因此未定義imgArray [2]。使用臨時變量來交換其他圖像。

來源

2012-05-12 23:00:32 dragon66

$('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-12 23:13:55 Bill

圖像交換在Firefox中不起作用，但在Chrome和IE中可用

回答

相關問題