मैं कैसे वस्तुओं की एक सरणी है कि हर "actionButton" आईडी, चयनकर्ता और कॉलबैक धारण घटना

Question

की एक कॉलबैक के लिए एक विशिष्ट सरणी तत्व पारित करने के लिए

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

मुझे क्या करना कोशिश कर रहा हूँ एक समारोह बुला है जब भी कोई चयनकर्ता क्लिक किया जाता है तो सरणी (आईडी) से एक विशिष्ट पैरामीटर के साथ।

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 उपयोग कर सकते हैं:

देना बयान एक ब्लॉक गुंजाइश स्थानीय चर वाणी, वैकल्पिक रूप से एक मान में आरंभ।

आपको बंद करने का आश्वासन देगा।

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