Javascript 切换 class 未按预期工作 | 无 Jquery
[英]Javascript toggle class not working as intended | No Jquery
问题描述
I want to have the classname "active" to begin on the first sibling and switch to the next siblings after every 2 seconds.
我想让类名“活动”从第一个兄弟姐妹开始，并在每 2 秒后切换到下一个兄弟姐妹。 After the final sibling, it should come back to the first.在最后一个兄弟之后，它应该回到第一个。 Currently it adds the classname to every sibling, then begins to remove it from them sequentially at an interval of 2 seconds.目前，它将类名添加到每个兄弟姐妹，然后开始以 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>
2 个解决方案
解决方案1
1 已采纳 2021-04-03 19:35:38
You should remove the active class from the currently active element (if there is one) each time.您应该每次都从当前活动的元素（如果有的话）中删除活动的 class。
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>
解决方案2
1 2021-04-03 19:36:10
your toggle is doing something only on the current box.您的切换仅在当前框上执行某些操作。 That doesn't affect the other siblings.这不会影响其他兄弟姐妹。 In your code you need to 1) add class active on the current sibling 2) remove class active on the previous one:在您的代码中，您需要 1）在当前兄弟节点上添加 class 活动 2）在前一个兄弟节点上删除 class 活动：
<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");
// add active class to the current box
boxes[i].classList.add("active");
// remove active class from the previous one
if(i === 0) {
boxes[boxes.length - 1].classList.remove("active");
} else {
boxes[i - 1].classList.remove("active");
}
i++;
if (i >= boxes.length) {
i = 0;
}
}
setInterval(toggle, 2000);
</script>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.