0

Есть несколько элементов списка в 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>

1 ответ 1

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')
}
1
  • Точно! Как я мог такую логику пропустить... Спасибо! P.S. я только начал изучать JS :) 24 янв 2023 в 19:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.