Как убрать классы у всех элементов, а изменить одному выбранному

Рейтинг: 0Ответов: 1Опубликовано: 24.01.2023

Есть несколько элементов списка в html, хочу сделать чтобы при нажатии, добавлялся класс red к нажатому, а у других удалялся этот класс если он есть, и при нажатии на один и тот же элемент если есть класс red тоже убирался. Всё работает, при нажатии на каждый элемент, добавляется класс red, а у других убирается, но если нажать на этот же элемент, класс не убирается, что я делаю не так?

<ul>
 <li id="item1" onClick="toggleClass(1);">Item 1</li>
 <li id="item2" onClick="toggleClass(2);">Item 2</li>
 <li id="item3" onClick="toggleClass(3);">Item 3</li>
</ul>

<script>
function toggleClass(id) {
    const allLi = document.querySelectorAll('li')
    const thisLi = document.querySelector('#item'+id)
    allLi.forEach((item) => {
        item.classList.remove('red')
    })
    thisLi.classList.toggle('red')
}
</script>
javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Вы удаляете у ВСЕХ класс red, а потом добавляете. Надо исключить удаление у текущего элемента:

function toggleClass(id) {
    const allLi = document.querySelectorAll('li')
    const thisLi = document.querySelector('#item'+id)
    allLi.forEach((item) => {
        if ('item'+id !== item.id) {
           item.classList.remove('red')
        }
    }
    thisLi.classList.toggle('red')
}