Javascript 弹出模式仅适用于数组中的第一个按钮

我正在尝试为我正在设计的一个房地产网站实现一个弹出模式。进入代理页面时，每个代理都有自己的个人简历和“联系人”卡。选择联系人卡时，会出现一个弹出模式，背景为灰色。我设法实现了模态，但它只在9数组中的第一个按钮上工作。我知道这与唯一ID有关，但我不完全确定如何执行它。任何建议都会有帮助

• 哈特

//生物制剂：
“代理的个人信息已编辑”
接触

//模态
//模态内容
&时代；
联系方式
名称
电子邮件
主题
消息
发送消息
//获取模态
var modal=document.getElementById（“myModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

我想这是因为你这么做了：

var btn=document.getElementById（“myBtn”）

并且假设您只有一个名为

myBtn

的id，或者如果您有更多的id，那么它将只调用每次找到的第一个id

你应该改变方法。将所有用户存储在具有唯一id的对象数组中。

.map

在此数组上显示所有用户。然后，当您单击其中一个时，将

ID

作为参数传入。然后使用该

id

过滤数组以显示相关内容。下面是一个简化的例子

const users = [
   {id: 1, name: 'Tom', email: 'tom@test.com},
   {id: 2, name: 'Sam', email: 'sametest.com},
]

然后映射到它们以渲染它们

users.map((user) => 
   <div onClick={() => renderModalForCorrectUser(user.id)>
     <div> {user.name} </div>
     <div> {user.email} </div>
   </div>

---

我认为这是因为你这样做：

var btn=document.getElementById（“myBtn”）

并且假设您只有一个名为

myBtn

的id，或者如果您有更多的id，那么它将只调用每次找到的第一个id

你应该改变方法。将所有用户存储在具有唯一id的对象数组中。

.map

在此数组上显示所有用户。然后，当您单击其中一个时，将

ID

作为参数传入。然后使用该

id

过滤数组以显示相关内容。下面是一个简化的例子

const users = [
   {id: 1, name: 'Tom', email: 'tom@test.com},
   {id: 2, name: 'Sam', email: 'sametest.com},
]

然后映射到它们以渲染它们

users.map((user) => 
   <div onClick={() => renderModalForCorrectUser(user.id)>
     <div> {user.name} </div>
     <div> {user.email} </div>
   </div>

---

另一个数组元素在哪里？您可以创建JSFIDLE吗@乔尔·哈特，我已经回答了。如果有帮助，请告诉我其他数组元素在哪里？您可以创建JSFIDLE吗@乔尔·哈特，我已经回答了。如果需要，请告诉我helps@JoelHart很高兴知道！你们能投票并把问题标记为正确吗。非常感谢。我确实投了赞成票，但我的声望不到15，所以不会公开展示。再次感谢你@乔尔哈特：很高兴知道！你们能投票并把问题标记为正确吗。非常感谢。我确实投了赞成票，但我的声望不到15，所以不会公开展示。再次感谢你！