如何将类添加到集合中除一个元素之外的所有元素

时间:2019-06-20 22:17:06

标签: javascript html

我正在制作一个简单的滑块。我有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

1 个答案:

答案 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">&gt;</button>
{{1}}