javascript - 当同级节点处于 Activity 状态时，将不 Activity 的节点恢复为原始顺序

初学者在这里。因此，对于我的班级.active，我在CSS中将顺序设置为-1，以使其成为顶级div，它会正确删除该类，但我假设上一个活动的顺序仍为-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”，因此您需要使用常规函数。参考链接can you bind 'this' in an arrow function
您需要使用contains而不是includes。


我添加了代码段，以便对您有所帮助。

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>