javascript - 如何为事件回调传递特定数组元素

Question

我有一个对象数组，其中包含每个“actionButton”id、选择器和回调

var actionButtons = [
    {
        id:"0",
        selector:"._55ln._qhr",
        callback: undefined
    },
    {
        id:"1",
        selector:"._22aq._jhr",
        callback: undefined
    },
    .
    .
    .
];

我想做的是每次单击选择器时使用数组中的特定参数(id)调用一个函数。

for(var i=0;i<actionButtons.length;i++){
    $(document).on('click', actionButtons[i].selector, function() {
        makeAction(actionButtons[i].id);
        if (actionButtons[i].callback)
            actionButtons[i].callback(this);
    });
}

但是这段代码不起作用；看起来每次调用回调函数时，i 的值都等于数组大小。

我该如何解决这个问题；即。使每个回调的变量 i 的值都不同。

Answer 1

问题是因为 i 变量在循环中递增。这意味着当第一个事件处理程序在循环完成后实际运行时，i 是最大值，而不是 0。

要解决此问题，您可以使用闭包:

for(var i = 0; i < actionButtons.length; i++) {
  (function(i) {
    $(document).on('click', actionButtons[i].selector, function() {
      makeAction(actionButtons[i].id);
      if (actionButtons[i].callback)
        actionButtons[i].callback(this);
    });
  })(i);
}