Question

我有一个包含一些信息对话框的页面（本例中为5）。目标是在页面上具有可变数量的信息框，每个信息框由唯一按钮调用。单击该按钮时，将关闭任何其他框并显示当前框。而不是试图跟踪哪个盒子被打开或即将打开，我想我只是关闭所有盒子并打开当前信息框。

下面的代码有效：第一个for循环初始化所有对话框，closeBoxes（）函数关闭打开指定对话框之前打开的任何对话框。然而，似乎我应该能够遍历.click（function（）..）并添加任意数量的信息框。我在循环中尝试了$（“＃btn”+ i）...（“＃info”+ i），但这根本不起作用。

var TotalInfoBoxes=5;
for ( var i=1; i<=TotalInfoBoxes; i++) {
    $("#info"+i).dialog({ autoOpen: false });
}

$("#btn1").click(function() { closeBoxes(); $("#info1").dialog( "open" ); });
$("#btn2").click(function() { closeBoxes(); $("#info2").dialog( "open" ); });
$("#btn3").click(function() { closeBoxes(); $("#info3").dialog( "open" ); });
$("#btn4").click(function() { closeBoxes(); $("#info4").dialog( "open" ); });
$("#btn5").click(function() { closeBoxes(); $("#info5").dialog( "open" ); });

function closeBoxes() {
    for (var i=1; i<=TotalInfoBoxes; i++){
        $("#info"+i).dialog("close");
    }
}

对话框是一个优雅的解决方案，但我需要一些更通用的代码，因为我可能在给定页面上有20或30个信息框。非常感谢您的意见。

Answer 1

关闭对话框简单使用此对话框关闭

它们都继承了同一个类，这是选择all和close by的最佳方式：

$(".ui-dialog-content").dialog("close");

Answer 2

确保按钮和对话框有一个共同的类，按 btn 按钮＆amp;对话框 info

$(".btn").on('click',function(e){
     closeBoxes();
     var index=$(this).index();
     $(".info:eq("+index+")").dialog("open");      
});

jQuery为多个按钮添加单击功能

2 个答案: