如何准确识别触发事件侦听器的元素？

Question

我正在模态窗口中创建幻灯片放映！首先，我单击网站上的12张图像中的一张...然后打开模态窗口，其中包含带有幻灯片放映的窗口...应将我单击的图片（img）视为背景图片（作为背景图片）幻灯片中的第一张图片。网页上的图片位于id为pic_cnt的div中在模态幻灯片显示窗口的div（id modal_window）中，有12个div（每个图片），其类别为modal_pic！具有此类的每个div的背景图像的顺序与网页上的img顺序相同，但不透明度为0。我在页面上的每个img上添加了一个事件监听器，以打开模式窗口！如何将单击的img与相同的背景图像连接起来？单击img后，应添加模态窗口中具有相同背景图像的类（.current），以将不透明度更改为1。请帮助！let modal = document.getElementById('modal');let clickedPic = document.querySelectorAll('#pic_cnt img');let modalPic = document.querySelectorAll('#modal_window div');for (let i = 0; i < clickedPic.length; i++) {  clickedPic[i].addEventListener('click', openModal)}function openModal() {  modal.style.display = "block";}#modal {  display: none;  position: fixed;  top: 0;  left: 0;  width: 100vw;  height: 100vh;  z-index: 2;  background-color: rgba(1, 1, 1, .8);}#modal_window {  background-color: white;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  height: 55%;  width: 55%;}.modal_pic {  width: 100%;  height: 100%;  ;  position: absolute;  opacity: 0;}.current {  opacity: 1;}