Javascript jQueryUI为多个按钮添加单击功能

我有一个页面，其中包含一些信息对话框（本例中为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");
    }
}

var totalinfobox=5；
对于（var i=1；i对于关闭对话框，此所有对话框都将简单使用关闭

它们都继承同一个类，这是选择“全部”并关闭的最佳方式：

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

确保按钮和对话框有一个公共类，比如btn for buttons&info for your dialogs

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

这是一种比循环浏览并关闭每个项目更好的方法。这似乎适用于：for（var i=1；ithanks@user2738642如果你喜欢，那么另一位访问者会使用它。结合Rituraj Ratan的评论，我有一个更好的解决方案。@user2738642很高兴听到：）