如何使用 ev.target.nextElementSibling ev.targetprevElementSibling 转到下一个/上一个图像灯箱？答案

【问题标题】：How can i go to the next/previous image lightbox using ev.target.nextElementSibling ev.targetprevElementSibling?如何使用 ev.target.nextElementSibling ev.targetprevElementSibling 转到下一个/上一个图像灯箱？
【发布时间】：2020-10-10 18:27:22
【问题描述】：

我是网络开发的初学者

我的灯箱有问题，我需要使用 ev.target.nextElementSibling 和 ev.target.prevElementSibling 通过单击下一个 arrow.png (img)/ prev arrow.png 转到下一个/上一个图像（img），我已经尝试了所有方法，但我不知道如何。当我单击图像时，它会放大（没关系），但是当我单击箭头时，图像会隐藏，但我想转到下一张/上一张图像。

const imgs = document.querySelectorAll('.gallery img');
const lightbox = document.querySelector('.lightbox');
const arrowNext = document.querySelector('.arrowNext');
for (let index = 0; index < imgs.length; index++) {
  const img = imgs[index];
  img.addEventListener('click', showLightbox);
}

function showLightbox(ev) {
  const prevEl = ev.target.prevElementSibling;
  const nextEl = ev.target.nextElementSibling;
  console.log(ev)
  const lightbox = document.querySelector('.lightbox');
  const img = document.querySelector('.lightbox img');
  const imgUrl = ev.target.src;
  img.src = imgUrl;

  lightbox.classList.add('visible');
}

lightbox.addEventListener('click', hideLightbox);

function hideLightbox() {
  lightbox.classList.remove('visible');
}

arrowNext.addEventListener('click', nextPhoto);

function nextPhoto(ev) {
  const arrowNext = document.querySelector('.arrowNext');
  const img = document.querySelector('.arrowNext img');
  const imgUrl = ev.target.src;
  img.src = imgUrl;
  const next = ev.target.nextElementSibling;
}

body {
  background: #eee;
}

.lightbox {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: scale(0);
}

.visible {
  transform: scale(1);
}

.lightbox img {
  max-width: 80%;
  max-height: 80%;
}

.arrowNext {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lightbox</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="gallery">
    <img src="/img/img1.jpg" alt="photo1">
    <img src="/img/img2.jpg" alt="photo2">
    <img src="/img/img3.jpg" alt="photo3">
    <img src="/img/img4.jpg" alt="photo4">
  </section>
  <div class="lightbox">
    <div class="arrowPrev">
      <img src="/img/prev arrow.png" alt="">
    </div>
    <img src="/img/img5.jp" alt="">
    <div class="arrowNext">
      <img src="/img/next arrow.png" alt="">
    </div>
  </div>
  <script src="main.js" type="text/javascript"></script>
</body>

</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

请注意，ev.target 是鼠标单击的元素，在您的情况下是箭头。您正在寻找下一张图片，而不是下一个箭头。

我建议使用索引变量来获取显示的图像，然后执行document.querySelectorAll('img')[index+1] 以获取下一张图像。

你的代码可以提供什么：

（请注意，需要ev.stopPropagation() 以防止在单击箭头时关闭灯箱。）

const imgs = document.querySelectorAll('.gallery img');
const lightbox = document.querySelector('.lightbox');
const arrowNext = document.querySelector('.arrowNext');

var index = 0;

for (let index = 0; index < imgs.length; index++) {
  const img = imgs[index];
  img.addEventListener('click', (e) => {showLightbox(e, index)});
}

function showLightbox(ev, i) {
  const prevEl = ev.target.prevElementSibling;
  const nextEl = ev.target.nextElementSibling;
  const lightbox = document.querySelector('.lightbox');
  const img = document.querySelector('.lightbox img');
  const imgUrl = ev.target.src;
  img.src = imgUrl;
  
  index = i;

  lightbox.classList.add('visible');
}

lightbox.addEventListener('click', hideLightbox);

function hideLightbox() {
  lightbox.classList.remove('visible');
}

arrowNext.addEventListener('click', nextPhoto);

function nextPhoto(ev) {
  ev.stopPropagation();
  index++;

  const arrowNext = document.querySelector('.arrowNext');
  const img = document.querySelector('.arrowNext img');
  const imgUrl = imgs[index].src;
  img.src = imgUrl;
}

body {
  background: #eee;
}

.lightbox {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: scale(0);
}

.visible {
  transform: scale(1);
}

.lightbox img {
  max-width: 80%;
  max-height: 80%;
}

.arrowNext {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lightbox</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="gallery">
    <img src="/img/img1.jpg" alt="photo1">
    <img src="/img/img2.jpg" alt="photo2">
    <img src="/img/img3.jpg" alt="photo3">
    <img src="/img/img4.jpg" alt="photo4">
  </section>
  <div class="lightbox">
    <div class="arrowPrev">
      <img src="/img/prev arrow.png" alt="">
    </div>
    <img src="/img/img5.jp" alt="">
    <div class="arrowNext">
      <img src="/img/next arrow.png" alt="" style="background:red;padding:20px">
    </div>
  </div>
  <script src="main.js" type="text/javascript"></script>
</body>

</html>

【讨论】：