Question

我的页面上有3个滑块我是一个建筑物，但我很想知道最好的方法只针对活动的那个，所以下面的javascript将适用于所有这些。如果我禁用其他2个滑块，一切似乎都能正常工作。我第一次做这样的事情。我猜我的javascript选择器可能需要改变一些让它工作的东西。

对最佳前进方向提出任何建议。

<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>

{{1}}

Answer 1

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

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');
    ...
});

或者如果您更喜欢循环：

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

Answer 2

document.querySelector('.slider--3 .slider__slide')

但我建议将id放在你的滑块上，然后选择

document.querySelector('#slider--3')

当有多个时，如何使用javascript定位特定滑块

2 个答案: