爲什麼onclick的處理函數不能按預期工作？

我有以下的小片的代碼：爲什麼onclick的處理函數不能按預期工作？

var instance = this; 
window.onload = function() { 
    for (var i = 0; i < array.length; ++i) { 
     var currentDivId= array[i]; 
     var currentDiv = document.getElementById(currentDivId); 

     try { 
      if (!currentDiv) { 
       throw 'Div id not found: ' + currentDivId; 
      } 
      var image = document.createElement('img'); 
      image.src = 'img.jpg'; 
      image.onclick = function() { 
       instance.doSomething(currentDivId); 
      }; 

      currentDiv.appendChild(image); 
     } 
     catch(e) { 
      console.warn('oops'); 
     } 
    } 
};

此代碼被傳遞的div的ID的數組。它所做的是，它在每個div上呈現圖像並設置其onclick屬性。

說我有一個字符串數組：['abc', 'xyz']

我想要的代碼放置內<div id="abc"></div>圖像和內部<div id="xyz"></div>另一個圖像。

當您單擊第一個圖像時，應使用參數'abc'調用instance.doSomething函數，反之亦然。

但代碼無法正常工作。它總是調用instance.doSomething與數組中的最後一個參數，在這種情況下，'xyz'。

我是JS的新手，仍然沒有紮實地掌握其內部工作。這裏有什麼問題，我該如何解決？

任何幫助表示讚賞。謝謝。

來源

2011-12-26 Murat Derya Özen

我認爲你必須在'for'循環中寫'i ++'而不是'++ i' – diEcho 2011-12-26 07:56:18

@diEcho它有什麼關係？ – 2011-12-26 08:00:21

image.onclick = function() { 
    instance.doSomething(this.parentNode.id); 
};

這應該做到這一點。既然我們知道圖像在我們想要獲得的div內，那麼只需要一個dom元素並獲得它的id即可。

來源

2011-12-26 11:06:23 Munter

工程就像一個魅力，謝謝！ – 2011-12-26 11:20:03

嘗試：

image.onclick = (function() { 
    var currentD = currentDivId; 
    return function() { 
     instance.doSomething(currentD); 
    } 
})();

希望它可以幫助

來源

2011-12-26 07:54:44

不幸的是，它不起作用。該按鈕不再響應。 – 2011-12-26 08:04:33

@穆拉特 - 這應該工作。你提到你是JS的新手，所以'（function（）{}）（）'語法對你來說可能是新的，但要確保你匹配所有的括號。也許Sudhir可以添加一些解釋，因爲_why_它的工作... – nnnnnn 2011-12-26 10:42:13

歡迎Javascript的範圍的問題的奇妙世界。就目前而言，JS將您的onclick代碼視爲「當此對象被點擊時，獲取存儲在currentDivID變量中的值在發生CLICK並將其傳遞給doSomething函數時」。

你應該做的是根據圖像對象本身的參數。每個DOM對象都知道它在DOM樹中的位置，因此當它被點擊時，onclick代碼應該使用DOM遍歷操作來找出它所在的div並動態檢索它的ID。這樣，您不必擔心綁定變量和範圍問題......只需找出哪個div包含您的映像並在運行時獲取ID即可。

來源

2011-12-26 07:55:05

好吧，但這種方法不會花費一點時間，至少是日誌（頁面大小）的時間？沒有更容易/更快的可能？如果不是，我怎麼讓我的圖像弄清楚它包含在哪個div :) – 2011-12-26 08:07:15

解析樹實際上是一個非常快速的操作。每個節點都有一個.parentNode屬性，您可以將這些父母關注回樹的頂部。日誌（頁面深度）將是最糟糕的情況。因爲你直接將圖像插入到div中，所以最終可能只需要img.parentNode來獲取圖像所在的div，所以O（1）。 – 2011-12-26 21:58:36

爲什麼onclick的處理函數不能按預期工作？

回答

相關問題