tinymce按钮内的JavaScript循环

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

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

按钮显示正确，标签正确。我有按钮：

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

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

项目1
项目2
项目3

但是，无论单击哪个按钮，编辑器中显示的文本都是item3。它总是获取最后一个按钮文本。
有人知道为什么会这样吗

感谢使用
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);
  }
});

editor.on（'init'，函数（e）{
for（设i=1；i