Javascript：getElementsByTag DOM，動態src參考

過去一週我一直在廣泛地研究這個問題，但我無法弄清楚爲什麼這種方法無效。Javascript：getElementsByTag DOM，動態src參考

我試圖使用外部JavaScript文件來拉動html頁面上的所有img標籤，並在用戶將鼠標懸停在圖像上時動態地（通過更改src）換出圖像。當用戶懸停在圖像上時，我可以改變圖像，但是當它改回時，它不會與正確圖像協調（圖像1,2,3,4將全部改變爲圖像5）。

這裏是html。

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
      <html> 
      <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
      <script src="JS1.js" type="text/javascript" /></script> 
      <title>main</title> 
      </head> 

      <body> 
       <div id="divCont"> 
        <img src="images/button1_out.gif" id="button1" /> <br /> 
        <img src="images/button2_out.gif" id="button2" /> <br /> 
        <img src="images/button3_out.gif" id="button3" /> <br /> 
        <img src="images/button4_out.gif" id="button4" /> <br /> 
        <img src="images/button5_out.gif" id="button5" /> <br /> 
       </div> 
      </body> 
      </html>

這裏的JavaScript：

window.onload = function() 
{ 
    var arrImgs = document.getElementsByTagName("img"); 
    for(var i = 0; i < arrImgs.length; i++)  { 
      var elemImg = arrImgs[i]; 
      //alert(elemImg.id); 

      elemImg.onmouseover = function() { 
        //alert(this.src); 
        //var targetId = this.src; 
        this.src = "images/" + elemImg.id + "_over.gif"; 
        //alert(this.src); 
       } 
      elemImg.onmouseout = function()  { 
        //alert(this.src); 

        this.src = "images/" + elemImg.id + "_out.gif"; 
       } 
     } 
}

來源

2012-04-19 rj2700

歡迎來到經典的異步變量關閉問題。 – zzzzBov 2012-04-19 14:39:31

這就是爲什麼會發生這種情況 - 創建事件處理程序後，它們仍然引用elemImg變量。在循環結束時，該變量等於您設置的最後一個元素（第5個元素）。因此，稍後對elemImg的任何引用都會引用第5個元素。

以下是解決方法：在您的mouseout/mouseover函數中，使用「this.id」而不是「elemImg.id」。

來源

2012-04-19 15:02:55 dgabriel

非常感謝您的建議！我不知道我們被允許在迭代的任何部分使用「this」關鍵字。哇，這是一種解脫。 – rj2700 2012-04-19 15:36:30

在代碼中嘗試使用的this.id代替elemImg.id。

來源

2012-04-19 15:02:41 Quentin

非常感謝，它的工作！ – rj2700 2012-04-19 15:36:22

Javascript：getElementsByTag DOM，動態src參考

回答

相關問題