javascript - 我如何才能准确识别事件监听器从中触发的元素？

Question

我正在模态窗口中制作幻灯片!首先，我点击网站上 12 张图片中的一张……然后打开模态窗口，其中包含一个带幻灯片的窗口……我点击的图片 (img) 应该(作为背景图片)显示为幻灯片中的第一张图片。网页上的图片在一个id为pic_cnt的div中

在模态幻灯片窗口 (id modal_window) 的 div 中，有 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;
}

<section id="pictures">
  <div id="pic_cnt">
    <div><img src="Images/18.jpg"></a>
    </div>
    <div><img src="Images/5.jpg"></a>
    </div>
    <div><img src="Images/6.jpg"></a>
    </div>
    <div><img src="Images/14.jpg"></a>
    </div>
    <div><img src="Images/16.jpg"></a>
    </div>
    <div><img src="Images/19.jpg"></a>
    </div>
    <div><img src="Images/9.jpg"></a>
    </div>
    <div><img src="Images/17.jpg"></a>
    </div>
    <div><img src="Images/3.jpg"></a>
    </div>
    <div><img src="Images/15.jpg"></a>
    </div>
    <div><img src="Images/7.jpg"></a>
    </div>
    <div><img src="Images/10.jpg"></a>
    </div>
  </div>
  <div id="modal">
    <div id="modal_window">
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
    </div>
  </div>
</section>

Answer 1

在事件监听器中，this 是您单击的元素。您可以获取父 DIV，然后获取其在 pic_cnt DIV 中的索引，然后使用该索引在模态中找到相应的 DIV。

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";
  let index = Array.from(this.parentElement.parentElement.children).indexOf(this.parentElement);
  console.log(index);
  for (let i = 0; i < modalPic.length; i++) {
    modalPic[i].style.opacity = i == index ? 1 : 0;
  }
}

#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;
}

<section id="pictures">
  <div id="pic_cnt">
    <div><img src="Images/18.jpg"></a>
    </div>
    <div><img src="Images/5.jpg"></a>
    </div>
    <div><img src="Images/6.jpg"></a>
    </div>
    <div><img src="Images/14.jpg"></a>
    </div>
    <div><img src="Images/16.jpg"></a>
    </div>
    <div><img src="Images/19.jpg"></a>
    </div>
    <div><img src="Images/9.jpg"></a>
    </div>
    <div><img src="Images/17.jpg"></a>
    </div>
    <div><img src="Images/3.jpg"></a>
    </div>
    <div><img src="Images/15.jpg"></a>
    </div>
    <div><img src="Images/7.jpg"></a>
    </div>
    <div><img src="Images/10.jpg"></a>
    </div>
  </div>
  <div id="modal">
    <div id="modal_window">
      <div class="modal_pic">Pic 1</div>
      <div class="modal_pic">Pic 2</div>
      <div class="modal_pic">Pic 3</div>
      <div class="modal_pic">Pic 4</div>
      <div class="modal_pic">Pic 5</div>
      <div class="modal_pic">Pic 6</div>
      <div class="modal_pic">Pic 7</div>
      <div class="modal_pic">Pic 8</div>
      <div class="modal_pic">Pic 9</div>
      <div class="modal_pic">Pic 10</div>
      <div class="modal_pic">Pic 11</div>
      <div class="modal_pic">Pic 12</div>
    </div>
  </div>
</section>