javascript - 如何在 javascript (jQuery) 中分配迭代数组的事件回调

Question

我正在通过 javascript(使用 jQuery)生成一个无序列表。每个列表项都必须接收其自己的“点击”事件监听器。但是，我无法将正确的回调附加到正确的项目。一个(剥离的)代码示例可能会把事情搞清楚一点:

for(class_id in classes) {
    callback = function() { this.selectClass(class_id) };
    li_item = jQuery('<li></li>')
                .click(callback);
}

实际上，此迭代中进行了更多操作，但我认为它与问题的相关性不大。无论如何，正在发生的事情是回调函数似乎是引用 而不是存储(& 复制)。最终结果？当用户点击列表项中的任何时，它将始终执行 last class_id classes 的操作> 数组，因为它在特定点使用存储在 callback 中的函数。

我发现了变通方法(例如解析封闭的 a 元素中的 href 属性)，但我想知道是否有办法在一个“干净”的方式。如果我的方法令人恐惧，请告诉我原因:-) 谢谢!

Answer 1

这是一个经典的“你需要一个闭包”问题。通常情况下是这样的。

1. 迭代一些值
2. 在使用迭代变量的迭代中定义/分配一个函数
3. 您了解到每个函数仅使用上一次迭代的值。
4. WTF？

同样，当您看到这种模式时，它应该会立即让您想到“闭包”

扩展你的例子，这里是你如何放入一个闭包

for ( class_id in classes )
{
  callback = function( cid )
  {
    return function()
    {
      $(this).selectClass( cid );
    }
  }( class_id );
  li_item = jQuery('<li></li>').click(callback);
}

但是，在这个特定的 jQuery 实例中，您不需要闭包 - 但我不得不问一下您的变量 classes 的性质 - 那是一个对象吗？因为您使用 for-in 循环进行迭代，这表明 object.对我来说，这引出了一个问题，你为什么不把它存储在一个数组中？因为如果你是，你的代码可能就是这样。

jQuery('<li></li>').click(function()
{
  $(this).addClass( classes.join( ' ' ) );
});