这里是初学者。因此，对于我的类.active我在CSS中将顺序设置为-1，使其成为顶部的div。它正确地删除了类，但我假设前一个active的顺序仍然是-1
const divs = document.querySelectorAll('.div');
toggleActive = () =>
{
if (this.classList.includes("active"))
this.classList.toggle("active");
else
{
divs.forEach(x => x.classList.remove("active"));
this.classList.toggle("active");
}
}
divs.forEach(x => x.addEventListener("click", toggleActive));
基本上我有:div1 div2 div3 div4 div5，如果用户点击其中一个，结果应该是div4 div1 div2 div3 div5
再次单击应该得到div2 div1 div3 div4 div5，但我得到的是div4 div2 div1 div3 div5
CSS：
.active
{
order: -1;
}
如果你想继续使用你的代码，你需要按照下面的方式来做。
const divs = document.querySelectorAll('.div');
function toggleActive() {
if (this.classList.contains("active"))
this.classList.toggle("active");
else
{
divs.forEach(x => x.classList.remove("active"));
this.classList.toggle("active");
}
}
divs.forEach(x => x.addEventListener("click", toggleActive));
说明：
>
您不能使用箭头函数来绑定“this”，因此您需要使用正则函数来绑定“this”。参考链接，你能在箭头函数中绑定“this”吗
您需要使用contains而不是includes。
我已经添加了代码片段，这样它可能会对您有所帮助。
null
const divs = document.querySelectorAll('.div');
function toggleActive() {
if (this.classList.contains("active"))
this.classList.toggle("active");
else
{
divs.forEach(x => x.classList.remove("active"));
this.classList.toggle("active");
}
}
divs.forEach(x => x.addEventListener("click", toggleActive));.active
{
order: -1;
}
div.active{
color: darkgray;
}<div class="div">
1. One
</div>
<div class="div">
2. Two
</div>
<div class="div">
3. Three
</div>