jQueryUI为多个按钮添加点击功能

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

用于关闭对话框简单使用此所有对话框关闭

它们都继承了同一个类，这是全选并靠近的最好方法：

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

Answer 2

确保按钮和对话框有一个共同的类，例如 btn 用于按钮和 info 用于您的对话框

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