Цикл JavaScript внутри кнопки

Question

Мой цикл JavaScript не работает должным образом внутри кнопки tinymce.

Я установил переменную n, которая является размером массива, который я получаю из моего html-ввода.

var n = $('#total').val();

Затем я создаю массив кнопок tinymce: var menuItems = [];

В моем редакторе tinymce init я создаю кнопки:

editor.on('init', function (e) {

        for (var i=1; i<=n; i++){
            var obj = {
                text: 'Item ' + i,
                onclick: function() {
                    var msg = '&nbsp;<strong>#item' + i + '#</strong>&nbsp;';
                    editor.insertContent(msg);
                }
            }
            menuItems.push(obj);
        }
    });

Последний шаг - добавление menuItems к кнопкам tinymce:

editor.addButton('myButton', {
        type: 'menubutton',
        text: 'Items',
        icon: false,
        menu: menuItems 
    });

Кнопки отображаются правильно с правильной меткой. У меня есть кнопки:

Элемент 1 Пункт 2 Элемент 3

Однако, не имеет значения, какую кнопку я нажимаю, текст, отображаемый в редакторе, это item3. Он всегда получает последний текст кнопки. Кто-нибудь знает, почему это происходит?

Спасибо

Answer 1

Используйте let вместо var, поскольку let будет сохранять область видимости лексического блока , где var не будет:

editor.on('init', function(e) {
  for (let i = 1; i <= n; i++) {  // <-- use let here
    var obj = {
      text: 'Item ' + i,
      onclick: function() {
        var msg = '&nbsp;<strong>#item' + i + '#</strong>&nbsp;';
        editor.insertContent(msg);
      }
    }
    menuItems.push(obj);
  }
});

Вот документация на let