获取上一个/下一个按钮的元素索引

Posted 2023-02-25

【中文标题】获取上一个/下一个按钮的元素索引

【英文标题】：Get element index for prev/next button

【发布时间】：2018-07-28 23:17:51

【问题描述】：

我正在尝试为图片库完成一个滑块，而我所缺少的只是上一个/下一个按钮功能。现在 prev 按钮正在工作，但有一个问题。这就是问题所在，我有一个图片库，当我点击它们时，会出现一个弹出窗口，显示被点击的图片。但是，如果我单击任何不是数组的第一个图像并单击上一个按钮，它将带我回到数组的最后一个图像，而不是上一个按钮应该带我到上一个图像到被点击的那个。

因此，如果我有 10 张图像，然后单击数组中索引为 3 的图像并单击上一个按钮，弹出窗口应显示索引为 2 的图像。让我向您展示我目前得到的结果：

<div class="gallery">
  <img src="img/hg-1.jpg"  class="gallery__img">
  <img src="img/hg-2.jpg"  class="gallery__img">
  <img src="img/hg-3.jpg"  class="gallery__img">
  <img src="img/hg-4.jpg"  class="gallery__img">
  <img src="img/hg-5.jpg"  class="gallery__img">
  <img src="img/hg-6.jpg"  class="gallery__img">
  <img src="img/hg-7.jpg"  class="gallery__img">
  <img src="img/hg-8.jpg"  class="gallery__img">
  <img src="img/hg-9.jpg"  class="gallery__img">
  <img src="img/hg-10.jpg"  class="gallery__img">
  <img src="img/hg-11.jpg"  class="gallery__img">
  <img src="img/hg-12.jpg"  class="gallery__img">
</div>

这是Js：

const overlayString = () => `
<div class="overlay">
  <button class="overlay__close-icon" id="closeOverlay">&times;</button>
  <img src="img/prev.png"  class="overlay__btn" id="overlayPrev">
  <img src="img/hg-1.jpg"  class="overlay__img">
  <img src="img/next.png"  class="overlay__btn" id="overlayNext">
</div>`;

// Inject template to html structure
document.querySelector('#main').insertAdjacentHTML('beforeend', overlayString());

// Replace overlay img
const overlay = img => document.querySelector('.overlay__img').src = img.src;

// Show elements based on section
let query = document.querySelector('.gallery');
let images = 'gallery__img';
if (!query) 
  query = document.querySelector('.section-gallery');
  images = 'section-' + images;


// Nodelist elements
const imageElems = document.querySelectorAll("." + images);
let currentOverlay;

// Open overlay
query.addEventListener('click', () => 
  document.querySelector('.overlay').classList.add('showOverlay');
  document.querySelector('body').style.overflow = 'hidden';

// Change overlay img based on the element that was clicked.
    const target = event.target;
    const index =  Array.prototype.indexOf.call(query.children, target);
    overlay(imageElems[index]);
);

// Overlay prev and next button
document.querySelector('#overlayPrev').addEventListener('click', () => 
  currentOverlay > 0 ? --currentOverlay : currentOverlay = imageElems.length - 1;
  overlay(imageElems[currentOverlay])
);

我知道当我点击 prev 按钮时，我的代码没有注册被点击元素的索引，这可能是它不能按我想要的那样工作的原因，但我被困在这里，非常感谢任何帮助。

请不要使用 jQuery，我正在尝试仅使用纯 JS 来执行此操作。

【问题讨论】：

没有id 或"main" 的元素。

我的答案是你想要的吗？

【参考方案1】：

您可以使用 querySelector 获取所有图像，并使用 forEach 遍历其元素并附加一个事件侦听器，该事件侦听器将输出 nodeList 中的图像索引或Array.prototype.indexOf.call 以获取索引节点列表中的图像。如果你想从一开始获取元素的索引，只需在事件监听器的索引中加一即可。

<div class="gallery">
  <img src="img/hg-1.jpg"  class="gallery__img">
  <img src="img/hg-2.jpg"  class="gallery__img">
  <img src="img/hg-3.jpg"  class="gallery__img">
  <img src="img/hg-4.jpg"  class="gallery__img">
  <img src="img/hg-5.jpg"  class="gallery__img">
  <img src="img/hg-6.jpg"  class="gallery__img">
  <img src="img/hg-7.jpg"  class="gallery__img">
  <img src="img/hg-8.jpg"  class="gallery__img">
  <img src="img/hg-9.jpg"  class="gallery__img">
  <img src="img/hg-10.jpg"  class="gallery__img">
  <img src="img/hg-11.jpg"  class="gallery__img">
  <img src="img/hg-12.jpg"  class="gallery__img">
</div>
<script>
var galleryImages = document.querySelectorAll("div.gallery > .gallery__img");
galleryImages.forEach((img, index)=>
	img.addEventListener("click", function(e)
   console.log("Index of image: "+index);
   //console.log(Array.prototype.indexOf.call(galleryImages, e.target));
  );
);
</script>