Question

我在迭代哈希时犯了一个错误，但我不确定错误......

在控制器中，我有一个哈希，传递给Gon，看起来像这样：

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

在视图正文中，我正在根据图像标题创建一系列div ID：

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

在视图脚本中，每次点击带有该唯一ID的id时，我都会尝试使用相同类型的循环来调用函数（加载photoset）。换句话说，当用户点击id为“titleA”的div时，应该加载photoset“12345678”，依此类推。

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

我现在遇到的问题是，每当我点击任何一个div时，无论每个ruby视图的ID是“titleA”还是“titleB”还是“titleC”，唯一被称为“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的值在执行时绑定，而不是创建函数。

Javascript迭代哈希错误

1 个答案: