如何通過一個特定的數組元素的事件

Question

的回調我有對象的數組保存每個「actionButton」標識，選擇和回調

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

您可以使用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); 
    }); 
} 

Answer 3

爲了不落入閉合伏擊可能總是使用陣列方法等

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