我有一个附加到向下滚动事件的函数,它将一个类一个一个地添加到元素数组中。我现在想创建一个执行相反操作的函数并将其附加到向上滚动事件。任何帮助都会得到极大的赞扬!
我创建了一个函数,当触发向上滚动事件时,它会从数组中删除所有类,但我想一个一个地删除它们。
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();
}
}
}
最佳答案
那么,为什么不做与向下滚动相反的事情呢?
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');
};
关于javascript - 每次触发事件时,如何通过循环 1 对 1 来删除 classList 值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55852042/