如何传递特定的数组元素以进行事件回调

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);
}