Question

我试图在循环中生成多个jQuery对话框。有趣的是，如果我在function()中对对话框进行硬编码，例如#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> `

如果有人可以帮助我，那将是非常友好的！

Answer 1

在文档就绪功能中包含以下代码

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

Answer 2

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

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对话框

2 个答案: