javascript - 当同级节点处于事件状态时，将非事件节点返回到其原始顺序

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));

说明:

1. 您不能使用箭头函数来绑定(bind)“this”，因此您需要使用常规函数。引用链接，can you bind 'this' in an arrow function

2. 您需要使用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>