当同级节点处于活动状态时，将非活动节点返回到其原始顺序

Question

这里是初学者。因此，对于我的类.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;
}

Answer 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>