我是 JQuery 新手。
我的需要是,我有几个教室,比如 5 个教室,我从 DB 得到教室的。
我以如下格式显示它,
Classroom Name Details
------------------------------
classroom 1 Details
classroom 2 Details
classroom 3 Details
classroom 4 Details
classroom 5 Details
现在,当用户单击教室 1 的详细信息时,应打开对话框,其中显示属于教室 1 的学生的详细信息。应为相应的教室打开相应的对话框。
如果只有 1 个详细信息按钮,我可以通过查看我在 google 上搜索到的几个链接中的示例来打开对话框,但我的问题是我不知道将会有多少个教室,因为它是基于我将要列出的列表从数据库获取。
那么我应该在单击详细信息之前填充我的 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 。
希望这对您有帮助。
关于javascript - jquery根据id打开对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18013387/