点击Next按钮循环切换div的active类的实现问题咨询

需求说明 #

点击Next按钮时，将第一个div的active类移除并添加至第二个div；再次点击时，从当前带有active类的块中移除该类并添加到下一个块，依此类推直至最后一个块。

现有代码 #

HTML代码

<div class="main">
  <div class="block active"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
<button class="next">Next</button>

CSS代码

.main {
  display: flex;
}

.block {
  width: 8px;
  height: 16px;
  background: #767676;
  margin: 5px;
}

.active {
  height: 26px;
}

.next {
  padding: 5px;
}

原有JavaScript代码的问题 #

原代码只会给第一个非active的块添加active类，不会移除之前的active类，导致多个块同时拥有active；且当active到最后一个块时，querySelectorAll('.main > .block:not(.active)')会返回空数组，访问[0]会抛出错误。

const btn = document.querySelector('.next');
btn.addEventListener(`click`, e => {
 document.querySelectorAll(`.main > .block:not(.active)`)[0].classList += ` active`;
});

修正后的JavaScript代码 #

const btn = document.querySelector('.next');
btn.addEventListener('click', () => {
  // 获取当前激活的块元素
  const currentActive = document.querySelector('.main > .block.active');
  // 获取下一个兄弟块元素
  const nextBlock = currentActive.nextElementSibling;
  
  // 只有存在下一个块时才执行切换
  if (nextBlock) {
    currentActive.classList.remove('active');
    nextBlock.classList.add('active');
  }
});

逻辑说明 #

• 每次点击先定位当前带有active类的元素
• 通过nextElementSibling获取它的下一个兄弟块
• 若存在下一个块，就移除当前元素的active类，同时给下一个块添加active类
• 当active到最后一个块时，nextElementSibling为null，点击不会触发任何操作，符合需求

内容的提问来源于stack exchange，提问作者dxxdly