javascript - 使用闭包迭代带有变量的 jQuery 选择器

Question

[第一次在 stackoverflow 上。] 我试图动态地将 html 按钮添加到我的页面，然后使用 jQuery 的单击为它们提供一个 javascript 函数，以便在单击它们时运行。我希望数组中的每个元素都有一个按钮，因此我使用了 for 循环。我的代码如下所示(简化)

for (var i = 0; i < results.length; i++) {
    $("#" + place[i].place_id).click(function(){console.log("Test");})        
    $("#" + place[i].place_id).click();
}

(我在同一循环中注入(inject)具有正确 ID 的按钮。)此代码在运行时，控制台会记录正确次数的“测试”，但之后，只有最后一个按钮在单击时才会响应“测试”。 (这种情况有点荒谬。)因此，我认为事件处理程序最终仅使用 i 的最终值来分配事件处理程序。我认为问题与闭包有关，但我不确定如何从 jQuery 选择器中创建闭包(并且通常我对它们不熟悉)。

相反，作为一种黑客解决方案，我“手动”在 for 循环外部编写了如下所示的代码，并且它按预期工作，因为单击会导致控制台日志。

$("#" + place[0].place_id).click(function(){console.log("Test"););
$("#" + place[1].place_id).click(function(){console.log("Test");});
etc.

(当然，这一切都发生在更大的上下文中 - 特别是 Google Maps Places API 调用的回调。)

首先，我是否正确理解了这个问题？其次，什么会起作用？我应该采取完全不同的方法，例如使用 .each() 吗？

(稍后我想在单击时显示 place[i] 的属性，我认为这需要另一个回调 我的最终黑客代码如下所示:

$("#" + place[0].place_id).click(function(){google.maps.event.trigger(placeMarkers[0], "click"); repeated 20 times

Answer 1

为此，您只需在 for 循环内创建一个自执行函数，如下所示:

for (var i = 0; i < results.length; i++) {
    (function(index) {
        $("#" + place[index].place_id).click(function() { 
            //Do something with place[index] here 
        });
    })(i);
}