时间戳

首页 > 解决方案 > Javascript 切换类未按预期工作 | 没有jQuery

javascript - Javascript 切换类未按预期工作 | 没有jQuery

问题描述

我想让类名“活动”从第一个兄弟姐妹开始，并在每 2 秒后切换到下一个兄弟姐妹。在最后一个兄弟之后，它应该回到第一个。目前，它将类名添加到每个兄弟姐妹，然后开始以 2 秒的间隔顺序将其从它们中删除。

<body>
    <div class="list">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>


    <script type="text/javascript">
        var i = 0;
        function toggle() {
            var boxes = document.querySelectorAll('.box');
            boxes[i].classList.toggle("active");
            i++;

            if (i >= boxes.length) {
                i = 0;
            }
            
        }
        setInterval(toggle, 2000);
    </script>
</body>

标签： javascripthtml

解决方案

您应该每次都从当前活动元素（如果有的话）中删除活动类。

var i = 0;
var boxes = document.querySelectorAll('.box');
function toggle() {
    document.querySelector('.active')?.classList.remove('active');
    boxes[i].classList.add("active");
    i = (i + 1) % boxes.length;
}
setInterval(toggle, 2000);


.box {
  background-color: blue;
  height: 50px;
  border: 5px solid black;
}
.active {
  background-color: yellow;
}
<div class="list">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>


<script type="text/javascript">
var i = 0;
var boxes = document.querySelectorAll('.box');
function toggle() {
    document.querySelector('.active')?.classList.remove('active');
    boxes[i].classList.add("active");
    i = (i + 1) % boxes.length;
}
setInterval(toggle, 2000);
</script>

推荐阅读