Javascript 如何在循环中创建多个jQuery对话框

我试图在一个循环中生成多个jQuery对话框。有趣的是，如果我在函数中硬编码对话框，比如dialog1.dialog{…}和dialog2.dialog{…}等等，它会工作！ 但是如果我在循环中生成这些函数，它就不起作用了！！！ 以下是示例性代码：

<div id=object><div>
<script type="text/javascript">

var  array =['1','2','3','4','5','6','7','8'];
$(document).ready(function () {
    for(var i = 0; i < 7 ; i++) {
        $( "#dialog"+array[i]).dialog({
            autoOpen: false,
            width: "auto",
            show: {
                effect: "blind",
                duration: 500
            },
            hide: {
                effect: "blind",
                duration: 500
            }
        });

        $( "#opener"+array[i]).click(function() {
            $( "#dialog"+array[i]).dialog( "open" );
        }); 
     }
});

for(var i = 0; i < 7 ; i++) {
    $("#object").append("<button id=\opener"+array[i]+">Details</button> ");
    $("#object").append("<div class=\"dialog\" id=\"dialog"+array[i]+"\"title=\"Details\"></div>");
};

</script> `

---

如果有人能帮助我，那就太好了

在文件准备功能中包括以下代码

for(var i = 0; i < 7 ; i++) {
 $("#object").append("<button id=\opener"+array[i]+">Details</button> ");
 $("#object").append("<div class=\"dialog\" id=\"dialog"+array[i]+"\"title=\"Details\"></div>");
}

---

你需要交换你的循环。目前，您正试图在dialogX元素存在于DOM中之前访问它们。实际上，您可以将两个循环合并为一个循环，从而创建按钮和对话框元素，然后重新启动对话框

var  array =['1','2','3','4','5','6','7','8'];

$(document).ready(function () {
    for (var i = 0; i < array.length; i++) {
        var $dialog = $('<div />', {
            class: 'dialog',
            id: 'dialog' + array[i],
            title: 'Details'
        }).dialog({
            autoOpen: false,
            width: "auto",
            show: {
                effect: "blind",
                duration: 500
            },
            hide: {
                effect: "blind",
                duration: 500
            }
        });

        var $button = $('<button />', {
            id: 'opener' + array[i],
            text: 'Details'
        }).click(function () {
            $("#dialog" + array[i]).dialog("open");
        });

        $("#object").append($button, $dialog);
    }
});

---

在添加侦听器之后，您将添加按钮。查看jQuery的委派事件。另外，您可以将i替换为数组[i]，并将for循环更改为forvari=1；i=<8；i++@RobSchmuecker:不，他不是。侦听器位于doc.ready中，而动态元素的添加则不在其中@OP：代码似乎没问题。。。如果使用简单的alerti；，更改.dialog调用，会怎么样；？所有的盒子都显示出来了吗？此外，for循环应该是forvar i=0；i<8；i++因为数组中有8项：@RobSchmuecker:forvar i=1；i=<8；i++将用于基于1的数组，或者您将强制持续使用i-1。@Flater他确实在按钮检查之前添加侦听器，而对于基于1的数组，他的代码本质上是在使用他定义的数组。但是是的，有一个错误，我应该写forvar I=1；i<8；如果替换数组的假设不会进一步影响代码，则为i++。Javascript数组是基于0的。我应该在0点开始。您的更正只会循环7次，而数组有8个元素。它似乎是故意忽略的，因此它会在尝试对这些元素执行.dialog之前创建动态元素。我看不出有任何理由必须将其包括在doc.ready中；你能详细说明一下吗？就我所知，这个顺序不是奥普的例子。监听器位于doc.ready中，而动态元素的添加并不需要，因此它首先执行