Javascript 循环无法正确创建 jquery 控件

Question

我想更换:

    var linuxControls = ["CreateLinuxUser", "EditLinuxUser", "DeleteLinuxUser", "Export"];
    $("#dlgCreateLinuxUser").dialog({autoOpen: false});
    $("#btnCreateLinuxUser").click(function () {
        $("#dlgCreateLinuxUser").dialog("open");
    });
    $("#dlgEditLinuxUser").dialog({
      autoOpen: false
    });
    $("#btnEditLinuxUser").click(function () {
        $("#dlgEditLinuxUser").dialog("open");
    });
    $("#dlgDeleteLinuxUser").dialog({autoOpen: false});
    $("#btnDeleteLinuxUser").click(function () {
        $("#dlgDeleteLinuxUser").dialog("open");
    });
    $("#dlgExport").dialog({autoOpen: false});
    $("#btnExport").click(function () {
        $("#dlgExport").dialog("open");
    });

与:

    for (i = 0; i < linuxControls.length; i++) {
        var strDlg = "#dlg" + linuxControls[i];
        var strBtn = "#btn" + linuxControls[i];
        $(strDlg).dialog({autoOpen: false});
        $(strBtn).click(function () {
            $(strDlg).dialog("open");
        });
    }

但是，它仅创建最后一个控件“导出”。随着循环构造和字符串构建的进行，一切看起来都很好。 jquery 有什么奇怪的东西阻止了这种情况吗？

Answer 1

使用闭包循环，以便 i 不会在运行时更改，可以使用 jQuery each 来做到这一点。

$.each(linuxControls, function(i) {
    var strDlg = "#dlg" + linuxControls[i];
    var strBtn = "#btn" + linuxControls[i];
    $(strDlg).dialog({autoOpen: false});
    $(strBtn).click(function () {
        $(strDlg).dialog("open");
    });
});