的Javascript迭代對散列錯誤

Question

我犯了一個錯誤迭代一個哈希，但我不知道錯誤的...

在控制器中，我有一個哈希值，傳遞給剛，看起來像這樣的：

@images = { 
    "titleA" => "12345678" 
    "titleB" => "123456789" 
    "titleC" => "1234567890" 
} 
gon.images = @images  

在視圖身體，我創建基於圖像的標題這樣一系列的div id的：

<% @images.each do |image, key| %> 
    <div id="<%= "#{image}" %>"> 

在視圖腳本，我試圖用同一種循環來調用函數（加載照片等）每次點擊具有該唯一ID的ID時。換句話說，當用戶點擊ID爲「titleA」的div時，應該加載photoset「12345678」，等等。

for (var image in gon.images) 
    document.getElementById(image).onclick = function() 
    { 
     flickr:"set"+gon.images[image] 
    } 

我現在遇到的問題是，每當我點擊任何的div，如果不考慮它的每紅寶石視圖ID爲「titleA」或「titleB」或「titleC」，這是唯一的photoset稱爲「12345678」。我可能讓我的循環錯誤，但任何人都可以幫忙嗎？

謝謝！

注意：flickr的代碼和一切都基於預先存在的功能，並且一切正常，除了只有一個按鍵的photoset被返回。

Answer 1

由於JavaScript有唯一的功能範圍（不阻斷範圍），你就必須包裹功能在一個新的功能（閉合），捕捉參考image永久：

for (var image in gon.images) { 
    document.getElementById(image).onclick = (function(image) { 
     return function() { 
     // flickr:"set"+gon.images[image] 
     } 
    })(image); 
} 

的image可變，在你的每個匿名函數中，綁定到函數外的同一個變量。因此，在執行click函數時，由於循環將完全完成，因此image的值是循環中計算的最後一個值。

歸結爲：點擊函數中的image的值在執行時綁定，而不是函數的創建。