Question

我有一个对象数组，用于保存每个＆＃34; actionButton＆＃34; id，selector和callback

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

Answer 2

为了不陷入封闭伏击你可能总是使用像

这样的数组方法

actionButtons.forEach(function(ab) {
  $(document).on('click', ab.selector, function() {
    makeAction(ab.id);
    ab.callback && ab.callback(this);
  });
});

Answer 3

您可以使用let：

let语句声明一个块作用域局部变量，可选择将其初始化为一个值。

让保证关闭。

for(let 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);
     });
}

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

3 个答案: