oink
@oink
Начинающий похититель кода со StackOverflow

Как передать индекс цикла внутрь него другому массиву?

Добрый день, помогите, пожалуйста, новичку. Есть такой код:

var slides = document.querySelectorAll('.reviews__item');
var radioButtons = document.getElementsByName('review-toggle');

for (var i = 0; radioButtons.length > i; i++) {
  radioButtons[i].addEventListener ('click', function (evt) {
    evt.preventDefault;
    for (var j = 0; slides.length > j; j++) {
      slides[j].classList.add('slider__item--hidden');
    };
    slides[i].classList.remove('slider__item--hidden');
  });
};


В чем суть и что я хочу сделать: я пытаюсь собрать слайдер, у которого есть некоторое количество радиокнопок для управления. Количество слайдов и кнопок, естественно, одинаковое. Я хочу, чтобы при нажатии на какую-либо из радиокнопок все слайды скрывались, а у того, у которого индекс совпадает с индексом нажатой кнопки, удалялся класс, скрывающий данный слайд. В таком виде я получаю "TypeError: slides[i] is undefined", и по нажатию на любую из радиокнопок пропадают все слайды. Помогите понять, что не так, пожалуйста.
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
К изучению: замыкания в JS.

С минимальными изменениями можно примерно так сделать функцию, создающую функции, каждая запоминает переданный i:
плохой код
const slides = document.querySelectorAll('.reviews__item');
var radioButtons = document.getElementsByName('review-toggle');
var makeListener = function(i) {
  return function (evt) {
    evt.preventDefault;
    for (var j = 0; slides.length > j; j++) {
      slides[j].classList.add('slider__item--hidden');
    };
    slides[i].classList.remove('slider__item--hidden');
  };
}

for (var i = 0; i < radioButtons.length; i++) {
  radioButtons[i].addEventListener ('click', makeListener(i));
};


Лучше так:
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы