具有动态XML内容的Javascript模式

我有一个电影XML数据库。每部电影都有一张照片。点击图片模式打开，在模式中可以看到有关电影的信息。通过下面的代码，我可以迭代我的所有图片，它们是按钮

btn.forEach(element => {
 element.addEventListener("click", () => {                              
  modal.style.display = "block";                    
 } );
} );

问题是，这会一直打开相同的模式，这意味着内容不会动态变化，这取决于我单击的电影。我尝试了以下方法

btn.forEach(element => {
 element.addEventListener("click", () => {
  modal.forEach(item => {
   item.style.display = "block";
  });
 });
});

---

但这会将内容更改为数据库中的最后一个，再次始终显示相同的模态，同时也打破了所有模态的接近范围。如何为每部电影显示正确的模式？

我建议不要在这里使用箭头函数，因为上下文或者说绑定“this”最好的方法是使用普通的旧函数和一些DOM遍历

问题是你没有提供btn的代码，所以我不知道你是如何选择所有按钮的，但我会这样做：

Array.from（document.getElementsByClassName（'btn'））.map（btn=>btn.addEventListener（'click'，function（）{
const theContainer=this.closest（“.container”）
Container.getElementsByClassName（'modal'）[0]。classList.add（'show'）
container.getElementsByClassName（'close'）[0]。onclick=function（）{
this.closest（'.modal'）.classList.toggle（'show'））
}
}))

.modal{
显示：无；
}
.表演{
显示：块；
边框：1px纯红；
}

模态

X
0
模式1

X
1.
模式2

X
2.
模式3

X
3.

如果提供一个生成html信息的示例，以及变量

btn

和

modal

是如何初始化的，那么这将很有帮助？