我如何准确地识别事件列出者从中触发的元素

我正在模态窗口中构建幻灯片节目！首先，我单击网站上的12张图像之一...然后打开模式窗口，其中包含一个带有幻灯片的窗口...图片(IMG(，我单击的图片(作为背景图像(是幻灯片中的第一张图片。网页上的图片在div中，带有ID pic_cnt

在模态幻灯片窗口(ID MODAL_WINDOW(的DIV中，有12个Divs(对于每张图片(，带有Modal_pic！此类的每个DIV都具有与网页上的IMG相同顺序的背景图像，但具有不透明度0。

我在页面上的每个IMG上添加了一个eventlistener，它打开了模式窗口！如何将单击的IMG与相同的背景图像连接？当单击IMG时，应添加模态窗口中相同背景图像的类(.Crurnent(，以将不透明度更改为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>

在事件侦听器中， 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>

fyi：当您运行示例时，我需要几秒钟才能获得活动解雇

我摆脱了大多数div，只保留一个，正弦您只需要一个div，您可以在每次点击时替换它的内部内容。

。

我使用

$(e.target(

为您提供单击的项目(读取检查使用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>

相关内容

最新更新

热门标签：