Вернуть неактивный узел обратно в исходный порядок, когда активен узел-брат

Question

Начинающий здесь. Так что для моего класса .active я устанавливаю порядок -1 в моем CSS, чтобы он стал верхним 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

click опять должно получиться div2 div1 div3 div4 div5 но вместо этого я получу div4 div2 div1 div3 div5

CSS:

.active
{
    order: -1;
}

Answer 1

пример с набором данных, который сокращает строки кода и не забудьте заключить его в гибкую рамку для эффекта порядка в слово

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>

Answer 2

Если вы хотите продолжить использовать свой код, вам нужно сделать это следующим образом.

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. Вы не можете использовать функцию стрелки для свяжите «это», так что вам нужно использовать обычную функцию для этого. Ссылочная ссылка вы можете связать 'this' в функции стрелки

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>