javascript - jQuery 单击事件显示 JSON 数组中的特定数据无法正常工作

Question

我使用 JSON 数组创建了 3 个虚拟用户，如下所示:

var userArray = {"users":[
    {"Name":"User1","Email":"user1@something.com"},
    {"Name":"User2","Email":"user2@something.com"},
    {"Name":"User3","Email":"user3@something.com"}
]};

现在，我只想显示存储在具有类的 div 中的每个用户的名称。

var i = 0
document.writeln("<div id=tableThis>");
for(i=0;i<userArray.users.length;i++)
{
    document.writeln("<div class=allUser>");
    document.writeln("<b>User :: </b>"
            + userArray.users[i].Name);
    document.writeln("<div class=emails><b>Email :: </b>"
            + userArray.users[i].Email  +"</div>");
    document.writeln("</div>");
}

如果我提供类 .emails display:none

，则仅显示名称即可正常工作

现在，我想要实现的是，当单击每个名称时，它应该在下面的 div 中显示他们的电子邮件。 但每次我单击名为 .allUser 的 div 时，它都会立即显示所有电子邮件，这是有道理的，因为所有电子邮件都具有相同的类。

我正在使用下面的代码

$(document).ready(function(){
$(".allUser").click(function() {
    $('.emails').show(1000);
});

});

我最好希望切换每个名称，以便当您单击每个用户的名称时我可以显示、隐藏每个用户的电子邮件。

当他们不允许document.writeIn时，我很难提供 fiddle

是否有一种更整洁/更干净的方法来完成这个小任务？

Answer 1

您需要deleagted event因为 html 是在 DOM 加载后动态生成的，并使用 find()获取类 .emails 的子元素，

这样做:

$(document).ready(function(){
$(document).on("click",".allUser",function() {
    $(this),find('.emails').show(1000);
});

});