javascript - 每次触发事件时，如何通过循环 1 对 1 来删除 classList 值？

Question

我有一个附加到向下滚动事件的函数，它将一个类一个一个地添加到元素数组中。我现在想创建一个执行相反操作的函数并将其附加到向上滚动事件。任何帮助都会得到极大的赞扬!

我创建了一个函数，当触发向上滚动事件时，它会从数组中删除所有类，但我想一个一个地删除它们。

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

这是我用来将类逐个添加到元素的函数

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

这是在向上滚动事件时触发的，它从上面的代码中删除了所有添加的类。但我希望它一个一个地删除类。

function removeOnScroll() {
  for  ( var i = 0; i < slide.length; i++){

    slide[i].classList.remove('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();
                moveBackground();


            }

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

        }

    }

Answer 1

那么，为什么不做与向下滚动相反的事情呢？

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

function removeOnScroll() {
  for (var i = slide.length - 1; i >= 0; i--) {
    if (!slide[i].classList.contains('scroll')) {
      continue;
    } else {
      slide[i].classList.remove('scroll');
      break;
    }
  }
};

---

但是，为了简化您的代码，您可以每次都做一个新的选择

function addOnScroll() {
  var next = document.querySelector('div.about-slide:not(.scroll)');
  if (next)
    next.classList.add('scroll');
};

function removeOnScroll() {
  var all = document.querySelectorAll('div.about-slide.scroll'),
      last = all[all.length - 1]

  if (last)
    last.classList.remove('scroll');
};