Как выполнить цикл 1: 1, добавляя значение classList каждый раз, когда происходит событие?

Question

Я новичок в JavaScript и мне интересно, как обновлять classList каждого элемента в NodeList каждый раз, когда вызывается событие onDocumentMouseScroll.

Используя цикл forЯ взял все элементы, которые мне нужно изменить, и добавил к ним класс «прокрутки», используя classList.add, но я не знаю, как изменить их 1 на 1?

var slide = document.querySelectorAll('div.about-slide');

function addOnScroll() {

for  ( var i = 0; i < slide.length; i++){
  console.log(i);
  //add 'scroll' class to [0] after the wheel event then [1] then [2]...'
  slide[i].classList.add('scroll');

  };
}

function onDocumentMouseScroll( event ) {
    console.log(event);

        if( Date.now() - lastMouseWheelStep > 600 ) {

            lastMouseWheelStep = Date.now();

            var delta = event.detail || -event.wheelDelta;
            if( delta > 0 ) {
                navigateNext();
                addOnScroll() 


            }

            else if( delta < 0 ) {
                navigatePrev();
            }

        }

    }

Я ожидаю, что результат будет перебирать NodeList 1 на 1, а не добавлять класс 'scroll' ко всем после 1 события.

Answer 1

Самый простой способ - отслеживать последний элемент, к которому вы добавили класс 'scroll', и выполнять итерации.

let lastI = 0;

function addOnScroll() {
  if (i < slide.length)
    slide[i].classList.add('scroll');
  lastI++;
}

В качестве альтернативы эта проблема кажется подходящей для генераторов, но немного сложнее прочитать imo:

let slideIterator = (function* () {
  for (var i = 0; i < slide.length; i++)
    yield slide[i];
})();

function addOnScroll() {
  let slide = slideIterator.next().value;
  if (slide)
    slide.classList.add('scroll');
}

Answer 2

Просто добавьте :not(.scroll) к вашему запросу:

function addOnScroll() {
  const item = document.querySelector('div.about-slide:not(.scroll)');
  if (item != null) {
    item.classList.add('scroll');
  } else {
    // no items left, do something?
  }
}

Answer 3

Вам необходимо обновить функцию addOnScroll, чтобы можно было проверять следующий элемент без класса прокрутки, добавлять класс прокрутки к элементу и прерывать цикл.

function addOnScroll() {
    for  ( var i = 0; i < slide.length; i++){
        if(slide[i].classList.contains('scroll')){
            continue;
        }else{
            slide[i].classList.add('scroll');
            break;
        }
    };
}