Làm thế nào để vượt qua một phần tử mảng cụ thể đối với một callback của sự kiện

Question

Tôi có một mảng các đối tượng chứa mỗi "actionButton" id, chọn và gọi lại

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

Những gì tôi đang cố gắng làm là gọi một hàm với một tham số cụ thể từ mảng (id) mỗi lần chọn một công cụ chọn.

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

Nhưng mã này không hoạt động; có vẻ như mỗi khi hàm gọi lại được gọi là giá trị của i bằng kích thước mảng.

Tôi có thể giải quyết vấn đề này như thế nào. để làm cho giá trị của biến số i trở nên khác nhau đối với mỗi lần gọi lại.

Answer 1

Vấn đề là do biến số i đang được tăng lên trong vòng lặp. Điều này có nghĩa là khi trình xử lý sự kiện đầu tiên thực sự chạy sau khi vòng lặp hoàn tất, i là giá trị tối đa, không phải là 0.

Để khắc phục điều này, bạn có thể sử dụng một đóng cửa:

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

Bạn có thể sử dụng let:

Tuyên bố let khai báo một biến cục bộ phạm vi khối, tùy chọn khởi tạo nó thành một giá trị.

Hãy để đảm bảo với bạn khi đóng.

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

Để không rơi vào đóng cửa phục kích bạn luôn có thể sử dụng phương pháp mảng như

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