我正在制作一个简单的滑块。我有3张幻灯片和箭头可以左右移动。另外,我还有一个计数器变量设置为0。通过单击右键,我要这样做:我想遍历我的幻灯片元素的集合,以将“隐藏”类分配给所有元素,但一个元素等于“计数” +1(下一张幻灯片)。
let slides = document.querySelectorAll('.slide');
let rightCaret = document.querySelector('.rightCaret');
// numerating all the li elements (slides) giving them ids
setIdToEachSlide = function() {
for (i = 0; i < slides.length; i++) {
slides[i].id = i;
}
};
setIdToEachSlide();
rightCaret.addEventListener('click', function () {
slides.forEach(element => {
if (element.id == count + 1) {
continue;
} else {
element.classList.add('hide');
}
});
});```
I expected my function to set every slide but the next one class 'hide' but it sets this class to every slide
答案 0 :(得分:0)
continue
指令不适用于forEach
/在hide
内部。
您可以只从当前幻灯片中删除count
类,然后将其添加到所有其他幻灯片中。您还应该在使用let slides = document.querySelectorAll('.slide');
let rightCaret = document.querySelector('.rightCaret');
function setIdToEachSlide() {
for (i = 0; i < slides.length; i++) {
slides[i].id = i;
}
}
setIdToEachSlide();
let count = 0;
rightCaret.addEventListener('click', function() {
count++;
if (count > slides.length - 1) {
return; // we are on the last slide, nothing todo!
}
slides.forEach(element => {
if (element.id == count) {
element.classList.remove('hide');
} else {
element.classList.add('hide');
}
});
});
变量之前对其进行声明。
示例:
.hide {
display: none;
}
<ul>
<li class="slide">Slide 1</li>
<li class="slide hide">Slide 2</li>
<li class="slide hide">Slide 3</li>
<li class="slide hide">Slide 4</li>
<li class="slide hide">Slide 5</li>
</ul>
<button class="rightCaret">></button>
{{1}}