Javascript 单击按钮打开模式，单击关闭按钮隐藏模式

我正在尝试添加一个类，以便在单击父对象时可以看到子对象

.modal container

，这是可行的，但是代码的第二部分似乎不起作用。e、 g.当我点击右上角的X符号

。关闭模态

时，模态不会消失

这是代码的样子：

$(".animals-images").on('click', function() {
    $(this).find(".modal-container").addClass("show");
  });

$(".close-modal").on('click', function() {
    $(this).parent(".modal-right").parent(".modal").parent(".modal-container").removeClass("show");
  });

.modal-container.show {
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
}

CSS上的

.show

类样式如下所示：

$(".animals-images").on('click', function() {
    $(this).find(".modal-container").addClass("show");
  });

$(".close-modal").on('click', function() {
    $(this).parent(".modal-right").parent(".modal").parent(".modal-container").removeClass("show");
  });

.modal-container.show {
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
}

如果在jQuery代码的最后一部分，我将CSS

（“不透明度”，“0”）

而不是

removeClass

它可以工作（但显然只工作一次）。所以我不太明白这里出了什么问题

我想在香草JavaScript中实现这一点，因此如果您知道如何实现这一点，将不胜感激

HTML:

点击我！
比安卡
X

我的同僚们都是精英。建筑师，埃尼！
如果你是一个没有生命的人，那么你就应该坐在这里！
如果你的生活质量比你的生活质量差！

考虑到这重复了10次（针对10个不同的图像/模态），我正在尝试用几行代码来实现这一点，而不是选择10次单独的更新（基于OP注释）

---

谢谢你的回答@dippas，我有没有办法让这段代码对许多其他图像起作用

您必须循环浏览每个按钮，然后在每个事件上切换class

show

（

e.currentTarget

）

const buttonsOpen=document.querySelectorAll（'.click me'），
buttonsClose=document.querySelectorAll（“.close模式”）
按钮Open.forEach（el=>el.addEventListener（'click'，e=>e.currentTarget.parentElement.nextElementSibling.classList.add（'show'））
buttonsClose.forEach（el=>el.addEventListener（'click'，e=>e.currentTarget.closest（'.modal container'）.classList.remove（'show'））

.modal容器{
显示：无
}
.modal-container.show{
显示：块
}

点击我！
比安卡
X

模式1


点击我！
比安卡
X

模式2

请出示htmlHi@dippas感谢您的光临。我已经用HTML代码更新了这个问题。谢谢你的回答@dippas，有什么方法可以让这个代码对许多其他图像起作用吗？@Mikado94查看更新的答案