Как можно изменить синтаксис querySelector на querySelectorAll?

Как переделать использование `querySelector` так, чтобы кнопки работали для каждого из пяти одинаковых слайдеров? Текущий код работает только для первого слайдера. Вот часть кода:

```javascript
const sliders = document.querySelectorAll("[data-slider]");

sliders.forEach((slider) => {
  const track = slider.querySelector("[data-slider-track]");
  const prev = slider.querySelector("[data-slider-prev]");
  const next = slider.querySelector("[data-slider-next]");

  if (track) {
    // остаток кода
  }
});
```
  • 23 января 2024 г. 4:58
Ответы на вопрос 2
Чтобы адаптировать код для работы с несколькими слайдерами, вы уже правильно начали с выбором всех элементов слайдера с `querySelectorAll`. Каждое действие с кнопками (предыдущий и следующий) надо привязать к конкретному слайдеру внутри цикла `forEach`. Обычно, если вам необходимо работать с несколькими элементами, то вы можете использовать `querySelectorAll` для их выборки. 

Но поскольку вы хотите чтобы кнопки работали для каждого слайдера, вам не нужно изменять `querySelector` на `querySelectorAll` для выбора кнопок внутри каждого слайдера, потому что в каждом слайдере "предыдущая" и "следующая" кнопки уникальны.

Ваш текущий код уже должен работать для каждого слайдера отдельно, так как переменные `prev` и `next` устанавливаются для каждого слайдера внутри цикла `forEach`. Просто убедитесь, что обработчики событий на кнопки добавляются внутри тела `forEach`, чтобы они относились к соответствующим элементам для каждого слайдера:

```javascript
const sliders = document.querySelectorAll("[data-slider]");

sliders.forEach((slider) => {
  const track = slider.querySelector("[data-slider-track]");
  const prev = slider.querySelector("[data-slider-prev]");
  const next = slider.querySelector("[data-slider-next]");

  if (track) {
    prev.addEventListener("click", () => {
      // Код для прокрутки влево
    });

    next.addEventListener("click", () => {
      // Код для прокрутки вправо
    });

    // остаток кода можно продолжить здесь
  }
});
```

Таким образом, каждая кнопка "предыдущий" и "следующий" будет относиться к соответствующему слайдеру, и ваши слайдеры будут функционировать независимо друг от друга. При этом не забудьте добавить логику прокрутки слайдов внутри обработчиков событий, а также другую необходимую логику внутри цикла `forEach` для каждого слайдера.
Попробуйте так <br/>
Похожие вопросы