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

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

<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>

Answer 2

  

仅供参考：当您运行示例时，我花了几秒钟时间才能获得事件   被解雇

我摆脱了大多数div，只保留了一个div，因为您只需要一个div，就可以根据图像在每次单击时替换其内部内容。

我用过

  

$（目标）

为您提供已单击的项目（ 阅读 Check which element has been clicked with jQuery）。一旦可以访问该元素，您就可以完成其余的工作。然后，我将该目标元素传递给您的openmodal（）函数并更新div内容。

如果不清楚，请发表评论。

 
  let modal_div = document.getElementById('modal');
$('img').click(function(e) {
  console.log(e)
  var modal = $('.modal_pic');
  var target = $(e.target);
  openModal(target);
}
 );
 

function openModal( target) {
 
 $('.modal_pic').append(target[0])
  modal_div.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;
   
}

.current {
  opacity: 1;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script><script src="https://code.jquery.com/jquery-3.0.0.js"></script><section id="pictures">
  <div id="pic_cnt">
    <div><img height="50px" src="http://i.imgur.com/sRgTlGR.jpg"></a>
    </div>
    <div><img height="50px" src="http://i.imgur.com/WJXklif.png"></a>
    </div>
    <div><img height="50px" src="http://i.imgur.com/sRgTlGR.jpg"></a>
    </div>
    <div><img height="50px" src="http://i.imgur.com/WJXklif.png"></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>
  </div>
</section>