Javascript 循环中的Jquery闭包_Javascript_Jquery_Closures

Javascript 循环中的Jquery闭包

javascript jquery

Javascript 循环中的Jquery闭包,javascript,jquery,closures,Javascript,Jquery,Closures,我正在尝试创建一个插件，在其中传递特定事件的处理函数。在下面的简单示例中，我有两个按钮。当我按下按钮1时，其标签应更改为“按钮A”，当我按下按钮2时，其标签应更改为“按钮B” 然而，当我按下按钮1时，标签变为“按钮B”。我知道这与循环中的处理函数闭包有关，但我就是不知道如何修复它 <body> <button class="btn1">Button 1</button> <button class="btn2">Button 2&l

我正在尝试创建一个插件，在其中传递特定事件的处理函数。在下面的简单示例中，我有两个按钮。当我按下按钮1时，其标签应更改为“按钮A”，当我按下按钮2时，其标签应更改为“按钮B”

然而，当我按下按钮1时，标签变为“按钮B”。我知道这与循环中的处理函数闭包有关，但我就是不知道如何修复它

<body>
    <button class="btn1">Button 1</button>
    <button class="btn2">Button 2</button>
</body>

抱歉，如果示例有点长。这里是

这是您最新的工作小提琴：

只需将处理程序作为数据参数传递给事件注册，或者变量处理程序将指向其最后一个赋值（即循环的最后一个值）

因此，代码中的问题在于：

for( var handlerIdx in settings.handlers ){
    var handler = settings.handlers[ handlerIdx ];
...

您正在事件委托中使用

处理程序

变量，该变量绑定到外部变量

handlerIdx

，因此退出for循环时，handlerIdx将是最后一个id

下面是一个带有3个id的contra示例：

看看关于闭包的其他问题：

关于闭包的教程：

因此，让我们创建一个函数来创建事件委派，在循环外部，在循环内部，只需传递该函数，如下所示：

function createEvent(id) {
    $this.on(
      settings.handlers[id].on,
      settings.handlers[id].selector,
      function() {
         settings.handlers[id].handlerFunc( settings.helperFunctions, this)
      }
    );
}

 for( var handlerIdx in settings.handlers ){
     var handler = settings.handlers[ handlerIdx ];
     var s = handler.selector;
     createEvent(handlerIdx);
 }

将函数表达式放在

createHandlerFunction

中（以便返回），而不是在调用周围，这样它就会工作。稍微偏离主题：您不应该使用

for..in

来迭代数组。

for( var handlerIdx in settings.handlers ){
    var handler = settings.handlers[ handlerIdx ];
...

function createEvent(id) {
    $this.on(
      settings.handlers[id].on,
      settings.handlers[id].selector,
      function() {
         settings.handlers[id].handlerFunc( settings.helperFunctions, this)
      }
    );
}

 for( var handlerIdx in settings.handlers ){
     var handler = settings.handlers[ handlerIdx ];
     var s = handler.selector;
     createEvent(handlerIdx);
 }