使用闭包遍历带有变量的 jQuery 选择器

Iterating over jQuery selector with variable, using closures

本文关键字：变量 jQuery 选择器 闭包 遍历      更新时间：2023-09-26

[第一次在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();
}

(我在同一循环中注入具有正确 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

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

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