Javascript 切换"；addClass"；连续三次

这是我的html：

<div class="button"></div>
<div class="wrapper>
  <div class="something">Hello</div>
  <div class="box one">Box 1</div>
  <div class="box two">Box 2</div>
  <div class="box three">Box 3</div>
</div>

---

您需要在jquery上使用css

：eq（）

选择器或

.eq（）

$（文档）.ready（函数（）{
var index=0；//为第一个框定义索引
$（'.button'）。在（'click'，function（）上{
$（'.wrapper.box'）.removeClass（'active'）；//从所有box div中删除活动类
$（'.wrapper.box:eq（'+index+'））.addClass（'active'）；//将类active添加到我们需要的box索引中
index=（index<$（'.wrapper.box'）。长度-1）？index+1:0；//如果index=box div的数量，则添加+1，如果不返回0
}).click（）；//如果需要在加载时运行，请添加。click（）
});
.active{
背景：红色；
}

点击
你好
方框1
方框2
方框3
您可以尝试以下方法：


jQuery（“.button”）。单击（函数（）{
var active=jQuery（“.wrapper”）.children（“.active”）.first（）；
如果（！active.length）
jQuery（“.wrapper”）.children（“：first”）.addClass（“active”）；
否则{
active.removeClass（“active”）；
if（活动[0]！=jQuery（“.wrapper”）.children（“：last”）[0]）
active.next（）.addClass（“active”）；
其他的
jQuery（“.wrapper”）.children（“：first”）.addClass（“active”）；
}
});
。按钮{
宽度：150px；
高度：50px；
光标：指针；
背景颜色：蓝色；
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框样式：实心；
边框宽度：0.5px；
边界半径：9px；
位置：相对位置；
左：30%；
}
.包装纸{
边缘顶部：20px；
左边距：30px；
背景色：白色；
宽度：450px；
身高：550；
文本对齐：居中；
边框样式：虚线；
}
.主动{
背景颜色：灰色；
}
.什么{
边缘底部：8px；
边缘顶部：8px；
}
.盒子{
边缘底部：8px；
}

按我

你好
方框1
方框2
方框3
发电机功能的一些乐趣：）


let box=0；
$（'.button'）。在（'click'，function（）上{
const-box=document.querySelectorAll（'.box'）；//获取所有框
让iter=activateBox（盒子，盒子）；//创建Iterator来检查盒子
$（'.box'）.removeClass（'active'）；//从所有框中删除任何活动类
iter.next（box++）.value.classList.add（'active'）；//将活动类添加到行中的下一个框中
if（box==box.length）box=0；//如果到达最后一个box，则重置计数器
});
功能*激活盒（i、盒）{
收益箱[i]；
}
正文{
字体系列：“Arial”，无衬线；
}
.按钮{
显示：内联块；
填充：8px；
边框：2件纯色浅蓝色；
边界半径：4px；
颜色：#444；
光标：指针；
过渡：背景。15秒放松；
}
.按钮：悬停{
背景：浅蓝色；
颜色：#FFF；
}
.盒子{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：300px；
高度：100px；
背景：#FFF；
利润率：8px0；
边框：2件纯色浅蓝色；
边界半径：4px；
}
.box.active{
背景：浅蓝色；
颜色：#FFF；
}

应用活动
方框1
方框2
方框3
HTML是否正确
.wrapper
不是
.button
@acdcjunior的孩子是的，HTML是正确的-但是js是错误的，sry-我已经更新了它。@Pepe不客气。。请阅读代码中的注释。。祝你今天愉快：-）
$(".button").click(function() {
    $(this).find(".wrapper").add(".box").toggleClass("active");
});