Javascript 将未激活的节点返回到它'；同级节点处于活动状态时的原始顺序

我是初学者。因此，对于我的类

.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:

---

如果你想继续使用你的代码，你需要按照下面的方法来做

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”，因此需要使用常规函数来绑定。参考链接

您需要使用

包含

而不是

包含

我已经添加了代码片段，以便它可以帮助您

constdivs=document.queryselectoral（'.div'）；
函数toggleActive（）{
if（this.classList.contains（“active”））
this.classList.toggle（“活动”）；
其他的
{
divs.forEach（x=>x.classList.remove（“活动”）；
this.classList.toggle（“活动”）；
}
}
divs.forEach（x=>x.addEventListener（“单击”，toggleActive））
.active
{
顺序：-1；
}
活动分区{
颜色：暗灰色；
}

1.一个
2.两个
3.三
如果您想继续使用您的代码，您需要按照以下方式执行

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”，因此需要使用常规函数来绑定。参考链接

您需要使用
包含
而不是
包含

我已经添加了代码片段，以便它可以帮助您


constdivs=document.queryselectoral（'.div'）；
函数toggleActive（）{
if（this.classList.contains（“active”））
this.classList.toggle（“活动”）；
其他的
{
divs.forEach（x=>x.classList.remove（“活动”）；
this.classList.toggle（“活动”）；
}
}
divs.forEach（x=>x.addEventListener（“单击”，toggleActive））
.active
{
顺序：-1；
}
活动分区{
颜色：暗灰色；
}

1.一个
2.两个
3.三
示例，数据集减少了代码行数，请记住将其封装在弹性框中，以便对word产生排序效果


const divs=document.querySelectorAll（“[data index]”）；
divs.forEach（x=>x.addEventListener（'click'，（）=>{
divs.forEach（项=>{
item.classList=item.dataset.index==x.dataset.index？“div活动”：“div”
})
}))
div
{
光标：指针；
}
.主动
{
顺序：-1；
}
活动分区{
颜色：暗灰色；
}

1.一个
2.两个
3.三
4.四
5.五
示例，数据集减少了代码行数，请记住将其封装在弹性框中，以便对word产生排序效果


const divs=document.querySelectorAll（“[data index]”）；
divs.forEach（x=>x.addEventListener（'click'，（）=>{
divs.forEach（项=>{
item.classList=item.dataset.index==x.dataset.index？“div活动”：“div”
})
}))
div
{
光标：指针；
}
.主动
{
顺序：-1；
}
活动分区{
颜色：暗灰色；
}

1.一个
2.两个
3.三
4.四
5.五