javascript - 当有多个 slider 时，如何使用 JavaScript 定位特定 slider

Question

我的页面上有 3 个 slider ，我是一栋建筑，但我只是想知道仅针对事件 slider 的最佳方法，以便下面的 javascript 适用于所有 slider 。如果我禁用其他 2 个 slider ，一切似乎都工作正常。我第一次做这样的事情。 我猜我的 javascript 选择器可能需要更改一些内容才能使其正常工作。

感谢任何有关最佳前进方向的建议。

var sliderSlide = document.querySelectorAll('.slider__slide');
var nextSlide = document.querySelector('.slider__button--next');
var previousSlide = document.querySelector('.slider__button--previous');
var currentSlide = 0;
var currentSlideImg = 0;

//Reset slides
function resetSlides() {
  for (var s = 0; s < sliderSlide.length; s++) {
    sliderSlide[s].classList.remove('active');
  }
  for (var i = 0; i < sliderSlideImg.length; i++) {
    sliderSlideImg[i].classList.remove('active');
  }
}

//Start slides
function startSlide() {
  resetSlides();
  sliderSlide[0].classList.add('active');
  sliderSlideImg[0].classList.add('active');
}

//Previous slide
function slidePrevious() {
  resetSlides();
  sliderSlide[currentSlide - 1].classList.add('active');
  currentSlide--;
  sliderSlideImg[currentSlideImg - 1].classList.add('active');
  currentSlideImg--;
}

previousSlide.addEventListener('click', function() {
  if (currentSlide === 0 && currentSlideImg === 0) {
    currentSlide = sliderSlide.length;
    currentSlideImg = sliderSlideImg.length;
  }
  slidePrevious();
});

//Next slide
function slideNext() {
  resetSlides();
  sliderSlide[currentSlide + 1].classList.add('active');
  currentSlide++;
  sliderSlideImg[currentSlideImg + 1].classList.add('active');
  currentSlideImg++;
}

nextSlide.addEventListener('click', function() {
  if (currentSlide === sliderSlide.length - 1 && currentSlideImg === sliderSlideImg.length - 1) {
    currentSlide = -1;
    currentSlideImg = -1;
  }
  slideNext();
});

<div class="slider slider--1 active">
  <div class="slider__slide">
    <p class="slider__text">some text</p>
  </div>
  <div class="slider__slide">
    <p class="slider__text">some text</p>
  </div>
  <div class="slider__slide">
    <p class="slider__text">some text</p>
  </div>
  <div class="slider__buttons">
    <span class="slider__button--previous">Previous</span>
    <span class="slider__button--next">Next</span>
  </div>
</div>

<div class="slider slider--2">
  <div class="slider__slide">
    <p class="slider__text">some text</p>
  </div>
  <div class="slider__slide">
    <p class="slider__text">some text</p>
  </div>
  <div class="slider__slide">
    <p class="slider__text">some text</p>
  </div>
  <div class="slider__buttons">
    <span class="slider__button--previous">Previous</span>
    <span class="slider__button--next">Next</span>
  </div>
</div>

<div class="slider slider--3">
  <div class="slider__slide">
    <p class="slider__text">some text</p>
  </div>
  <div class="slider__slide">
    <p class="slider__text">some text</p>
  </div>
  <div class="slider__slide">
    <p class="slider__text">some text</p>
  </div>
  <div class="slider__buttons">
    <span class="slider__button--previous">Previous</span>
    <span class="slider__button--next">Next</span>
  </div>
</div>

Answer 1

您可以在 .slider 上创建循环，然后在每个项目上使用 querySelector，这样您就可以为每个 slider 添加变量

Array.from(document.querySelectorAll('.slider')).forEach(function(slider) {
    var sliderSlide = slider.querySelectorAll('.slider__slide');
    var nextSlide = slider.querySelector('.slider__buttons--next');
    var previousSlide = slider.querySelector('.slider__buttons--previous');
    ...
});

或者如果您更喜欢 for 循环:

var sliders = document.querySelectorAll('.slider');
for (var i = 0; i < sliders.length; ++i) {
   var slider = sliders[i];
   ...
}