基于id打开jquery对话框

jquery dialog open based on id

本文关键字：对话框 jquery 打开 id 基于      更新时间：2023-09-26

我是JQuery的新手。

我需要的是，我有几个教室，比如5个教室，从DB我得到的是教室的。

我正在以类似的格式显示它

Classroom Name    Details
------------------------------ 
classroom 1       Details
classroom 2       Details
classroom 3       Details
classroom 4       Details
classroom 5       Details

现在，当人们点击教室1的详细信息时，应该会打开对话框，显示属于教室1的学生的详细信息。应为相应的教室打开相应的对话框。

通过查看我在谷歌上搜索的几个链接中的示例，如果只有一个详细信息按钮，我可以打开对话框，但我的问题是，我不知道会有多少教室，因为它是基于我将从DB获得的列表。

那么，我应该在点击细节之前和点击细节时填充我的DIV吗？只是为了将该DIV作为对话框打开？这种要求应该采取什么样的一般方法。

请不要说我这么做是为了什么，如果需要的话，我也会粘贴我的代码。正如我从一个链接中举了一个例子，并根据我的需要对其进行了修改。

有人能给我指一些链接吗？或者帮我提供样品和解释。

我在使用jQuery Dialog时也遇到过类似的问题。最后，我使用jQuery数据函数将对话框相关的数据存储到DOM中（您需要的是课堂和细节之间的关系）。

var fakeData = [{id:"class1",students:[{name:"student1","tel":"12456"},{name:"student2","tel":"12456"}]},{id:"class2",students:[{name:"student3","tel":"12456"},{name:"student4","tel":"12456"}]},{id:"class3",students:[{name:"student5","tel":"12456"},{name:"student6","tel":"12456"}]},{id:"class4",students:[{name:"student7","tel":"12456"},{name:"student8","tel":"12456"}]}];
//generate detail buttons and store students data in DOM
fakeData.forEach(function(element, index, array){
  $("#btns").append('<button id="'+element.id+'" class="detail-btn">Classroom '+(index+1)+'</button>');
  $("body").data(element.id,element.students);
});
//register click event
$(".detail-btn").click(function(){
    $("#dialog").empty();
    var students = $("body").data($(this).attr("id"));
    students.forEach(function(element,index,array){
        $("#dialog").append("<div>"+element.name+"</div>");
    });
  $("#dialog").dialog("open");
});

我使用DOM-id属性作为数据的唯一键。并在单击特定详细信息按钮时获取数据。

您不必在HTML中填充大量div，只需使用此解决方案动态更新对话框内联内容即可。

但直到现在我才知道这个解决方案是否有任何副作用。也许有人可以进一步解释。

我做了一个简单的例子JSFiddle Demo。

希望这对你有帮助。

相关文章：