旋转图片库

Question

我正在通过一个小网站项目学习 JS，偶然发现了以下问题：

• 我有一个图片库，里面有几张照片
• 我总是可以一次看到 5 张图片
• 中间一个大，左右一个第二行，另外两个在后台

我已经有两个按钮可以在图库中旋转。现在我想通过单击中间图片左侧或右侧的图片来旋转图库。

HTML 库

<div class="gallery-container">
   <img class="gallery-item gallery-item-1" src="pictures/pic1.jpg" data-index="1">
   <img class="gallery-item gallery-item-2 prev-pic" src="pictures/pic2.jpg" data-index="2">
   <img class="gallery-item gallery-item-3" src="pictures/pic3.jpg" data-index="3">
   <img class="gallery-item gallery-item-4 next-pic" src="pictures/pic4.jpg" data-index="4">
   <img class="gallery-item gallery-item-5" src="pictures/pic5.jpg" data-index="5">
</div>

我的 Javascript

const galleryContainer = document.querySelector('.gallery-container');
let galleryItems = document.querySelectorAll('.gallery-item');
let galleryArray = Array.prototype.slice.call(galleryItems); 

let prevPic = document.querySelector('.gallery-item.gallery-item-2.prev-pic');
let listenerPrev = prevPic.addEventListener('click', function(prevEvent) {
  galleryArray.unshift(galleryArray.pop());
  updateGallery();
});

let nextPic = document.querySelector('.gallery-item.gallery-item-4.next-pic');
let listnerNext = nextPic.addEventListener('click', function(nextEvent) {
  galleryArray.push(galleryArray.shift());
  updateGallery();
});

// Update css classes for gallery
function updateGallery() {
  galleryArray.forEach(el => {
    el.classList.remove('gallery-item-1');
    el.classList.remove('gallery-item-2');
    el.classList.remove('gallery-item-3');
    el.classList.remove('gallery-item-4');
    el.classList.remove('gallery-item-5');
    el.classList.remove('prev-pic');
    el.classList.remove('next-pic');
  });

  galleryArray.slice(0, 5).forEach((el, i) => {
    el.classList.add(`gallery-item-${i+1}`);
  });

  document.querySelector('.gallery-item.gallery-item-2').classList.add('prev-pic');
  document.querySelector('.gallery-item.gallery-item-4').classList.add('next-pic');

  prevPic = document.querySelector('.gallery-item.gallery-item-2.prev-pic');
  nextPic = document.querySelector('.gallery-item.gallery-item-4.next-pic');

}

我的计划是单击“prevPic”并旋转图库。第一次点击它工作正常：画廊旋转和类更新。但是当我单击新的“prevPic”时，它什么也不做。我在浏览器中注意到的是，在 devoloper 控制台的 html 中添加的“事件”标签没有移动。

我希望有人理解我试图解释这件事并能帮助我。

提前致谢

Answer 1

我会完全重新考虑我的方法并做这样的事情，我什至不存储任何元素作为参考；当点击发生时，我只查看点击的内容并据此做出反应。像这样的东西对你的情况有用吗？

document.querySelector(".gallery-container").addEventListener("click", (e) => {
  if (e.target.classList.contains("prev")) {
    if (e.target.previousElementSibling) {
        e.target.previousElementSibling.classList.toggle("prev");
        e.target.classList.toggle("prev");
      e.target.nextElementSibling.nextElementSibling.classList.toggle("next");
      e.target.nextElementSibling.classList.toggle("next");
    } else {
        alert("Cannot go more previous than this, friendo")
    }
    
  }
  if (e.target.classList.contains("next")) {
    if (e.target.nextElementSibling) {
      e.target.nextElementSibling.classList.toggle("next");
        e.target.classList.toggle("next");
        e.target.previousElementSibling.classList.toggle("prev");
      e.target.previousElementSibling.previousElementSibling.classList.toggle("prev");
    } else {
        alert("Cannot go more next than this, friendo")
    }
  }
});

.prev {border: 2px solid red;}
.next {border: 2px solid blue;}

<div class="gallery-container">
   <img class="gallery-item" src="http://placekitten.com/50/50">
   <img class="gallery-item prev" src="http://placekitten.com/49/49">
   <img class="gallery-item" src="http://placekitten.com/48/48">
   <img class="gallery-item next" src="http://placekitten.com/47/48">
   <img class="gallery-item" src="http://placekitten.com/46/46">
</div>

Answer 2

感谢您的回答。我试过了，但最后找到了一种稍微不同的方法，对我来说效果更好（但你的方法给了我这个想法）：

我保留了我的函数 updateGallery()，在画廊转移后，我将类名移动到我的照片周围

function updateGallery() {
  galleryArray.forEach(el => {
    el.classList.remove('gallery-item-1');
    el.classList.remove('gallery-item-2');
    el.classList.remove('gallery-item-3');
    el.classList.remove('gallery-item-4');
    el.classList.remove('gallery-item-5');
    el.classList.remove('next');
    el.classList.remove('prev');
  });

  galleryArray.slice(0, 5).forEach((el, i) => {
    el.classList.add(`gallery-item-${i+1}`);
  });

  galleryArray[1].classList.add('prev');
  galleryArray[3].classList.add('next');
}

但这次访问它，但要循环浏览图库：

for (var i=0; i<galleryArray.length; i++) {
  galleryArray[i].addEventListener ('click', function(e) {
    if (this.classList.contains('prev')) {
      galleryArray.unshift(galleryArray.pop());
      updateGallery();
    } else if (this.classList.contains('next')) {
      galleryArray.push(galleryArray.shift());
      updateGallery();
    }
  })
}