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

Answer 2

既然你是jQuery，为什么不尝试类似的东西：

$('.linux-control').click(function() {
  $('#' + $(this).data('dialog')).dialog("open");
});

<button type="button" id="btnCreateLinuxUser" class="linux-control" data-dialog="dlgCreateLinuxUser">Create User</button>

修改

以上剪辑将.click()绑定到所有.linux-control类。然后它查找data-dialog属性并创建一个jQuery选择器来打开对话框。在上面的实例中，按钮在元素的dlgCreateLinuxUser属性中包含data-dialog。不需要循环，因为.click()函数仅绑定到触发它的元素但是侦听类.linux-control的所有元素。

Javascript循环没有正确创建jquery控件

2 个答案:

修改