当兄弟节点处于活动状态时，将非活动节点返回到其原始顺序答案

【问题标题】：Return an inactived node back to it's original order when a sibling node is active当兄弟节点处于活动状态时，将非活动节点返回到其原始顺序
【发布时间】：2020-06-26 14:11:14
【问题描述】：

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

【问题讨论】：

标签： javascript html css

【解决方案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。

我添加了sn-p代码，希望对你有所帮助。

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>

【讨论】：

【解决方案2】：

带有数据集的示例，它减少了代码行数，并且记得将它包含在一个弹性框中，以便对单词产生顺序效果

const divs = document.querySelectorAll('[data-index]');

divs.forEach(x=>x.addEventListener('click',()=>{
    divs.forEach(item=>{  
        item.classList=item.dataset.index==x.dataset.index?"div active":"div"
    })
}))

div
{
cursor: pointer;
}

.active
{
    order: -1;
}

div.active{
  color: darkgray;
}

<div style="display: flex;flex-direction: column;">
    <div class="div" data-index="0">
        1. One
    </div>
    <div class="div" data-index="1">
        2. Two
    </div>
    <div class="div" data-index="2">
        3. Three
    </div>
    <div class="div" data-index="3">
        4. Four
    </div>
    <div class="div" data-index="4">
        5. Five
    </div>
</div>

【讨论】：