主页 / 问题 / 1118145
Accepted
DarkRou
Asked:2020-04-30 18:04:40 +0000 UTC2020-04-30 18:04:40 +0000 UTC

你如何进入 forEach 循环中的下一次迭代？

  • 772

我通过在块中添加和删除一个类active来进行块切换。

var blocks = document.querySelectorAll('.block');

next.addEventListener('click', function () {
    blocks.forEach(function (val, id) {
        if (val.classList.contains('active')){

            val.classList.remove('active');

        }
    })
})
<div class="content">
    <div class="arrow left" id="prev">
      <button>left</button>
    </div>
    <div class="block active" id="block1">
      block1
    </div>
    <div class="block" id="block2">
      block2
    </div>
    <div class="block" id="block3">
      block3
    </div>
    <div class="block" id="block4">
      block4
    </div>
    <div class="arrow right" id="next">
      <button>right</button>
    </div>
</div>

现在在val.classList.remove('active'); 我需要写入val.classList.add('active');数组的下一个元素之后。问题是，如何使用完全循环来完成forEach？

javascript

1 个回答

  1. Best Answer

    这是一个没有循环的版本。

    next.addEventListener('click', function() {
  // берем активный блок
  const activeBlock = document.querySelector('.content>.block.active');
  // берем следующий блок
  const nextBlock = activeBlock.nextElementSibling;
  // если следующий элемент - блок, то добавляем ему класс active
  if (nextBlock.classList.contains('block')) {
    nextBlock.classList.add('active');
  } else {
    // иначе добавляем певому блоку класс active
    const firstBlock = document.querySelector('.content>.block');
    firstBlock.classList.add('active');
  }
  // убираем у "старого" блока класс active
  activeBlock.classList.remove('active');
});
    .active {
  color: red;
}
    <div class="content">
  <div class="arrow left" id="prev">
    <button>left</button>
  </div>
  <div class="block" id="block1">
    block1
  </div>
  <div class="block" id="block2">
    block2
  </div>
  <div class="block" id="block3">
    block3
  </div>
  <div class="block active" id="block4">
    block4
  </div>
  <div class="arrow right" id="next">
    <button>right</button>
  </div>
</div>

    • 1

相关问题