如何使每个创建的细节按钮引用到每个数据

Question

我使用firebase在html页面上检索数据，我希望它能将名称作为列表打印在html上，并将按钮附加在firebase中的每个名称旁边，单击每个按钮时，都会显示与该名称相关的地址和电子邮件。

到目前为止，我已经让它工作了，除了附加的按钮都会提醒相同的最后一次数据输入。我如何使它与正确的名称相关联？

以下是我关于firebase的数据：通讯录6d9e9信息-MCqyNHtvbuQxlYrp6Qz地址："测试地址"；电子邮件："测试电子邮件"；名称："测试"；-MCr3jCuPQ4MwOEYCDwS地址："testaddress2"；电子邮件："testemail2"；名称："test2"；-MCtJKw6iqflovcl1NEJ地址："testaddress3"；电子邮件："testemail3"；名称："test3"；

function getData(data) {
var database=firebase.database();
var rootRef=database.ref("information");
rootRef.on("value",gotData,errData);
}
function gotData(data){
//console.log(data.val());
var information = data.val();
var keys = Object.keys(information);
//console.log(keys);
for (var i = 0; i < keys.length; i++) {
    var k = keys[i];
    var name = information[k].name;
    var email = information[k].email;
    var address = information[k].address;
    console.log(name,email,address);                
    var node = document.createElement("LI");
    var textnode = document.createTextNode(name);
    node.appendChild(textnode);
    var buttonNode = document.createElement("BUTTON");
    buttonNode.innerHTML="Click for Details";
    buttonNode.addEventListener('click',() =>{
    alert("the email is: " + email + " and address is: " + address);
    });
    var retrievedName = document.getElementById("wow").appendChild(node).appendChild(buttonNode);
}
}

Answer 1

我的首选解决方案是使用数据属性将信息存储在按钮本身。

因此在CCD_ 1行之后添加以下行。

buttonNode.setAttribute("data-email",email);
buttonNode.setAttribute("data-address",address);

然后将您的点击处理程序替换为：

buttonNode.addEventListener('click',(e) =>{
     var btn = e.target;
     alert("the email is: " + btn.getAttribute("data-email") + " and address is: " + btn.getAttribute("data-address"));
});