Jak przekazać konkretny element tablicy dla wywołania zwrotnego zdarzenia

Question

Mam tablicę obiektów, które posiada każdy „actionButton” id, selekcyjny i oddzwanianie

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

Co usiłuję zrobić jest wywołanie funkcji z określonym parametrem z tablicy (id) za każdym kliknięciem selektora.

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

Ale ten kod nie działa; wygląda tak, że za każdym razem, gdy wywoływana jest funkcja zwrotna, wartość i jest równa wielkości tablicy.

Jak mogę rozwiązać ten problem; aby wartość zmiennej i stała się inna dla każdego wywołania zwrotnego.

Answer 1

Problem polega na tym, że zmienna i jest inkrementowana w pętli. Oznacza to, że gdy pierwsza procedura obsługi zdarzenia faktycznie działa po zakończeniu pętli, wartość i jest maksymalna, a nie 0.

Aby rozwiązać ten problem można użyć Zamknięcie:

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

Można użyć let:

Oświadczenie let deklaruje zmienną lokalną zakres blok, ewentualnie inicjowanie jej wartość.

Pozwól, aby zapewni Ci zamknięcie.

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

Aby nie wpaść w zasadzkę zamknięcia można zawsze użyć metod tablicowych jak

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