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

Question

[oink]

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

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", и по нажатию на любую из радиокнопок пропадают все слайды. Помогите понять, что не так, пожалуйста.

Answer 1

[Сергей Соколов]

К изучению: замыкания в 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));
};

Лучше так:

Answer 2

[Stalker_RED]