Zmiana kolorów w linkach navigacji JS

Question

Cześć.

Mam kilka linków w navigacji, po naciśnięciu jednego z nich chce żeby podkreślił mi się na jakiś kolor, dodał klasę. To działa, natmiast przy kliknięciu na drugi ten poprzedni nie traci tego koloru i tak w kółko.

Mój kod:

const navElements = [...document.querySelectorAll('.nav-header--item')];

const newArr = navElements.map(item => {
    item.classList.remove('abc');
    item.addEventListener('click', function() {
        if(item.classList.contains('abc')) {
            item.classList.remove('abc')
        }else {
            item.classList.add('abc');
        }
    });
})

Macie jakieś pomysły? abc to klasa z kolorem który dodaje

Answer 1

Podpiąłeś listenery do wszystkich elementów z klasą .nav-header--item, ale klasa "abc" jest dodawana lub usuwana na klikniętym elemencie - Twój sposób obsługi kliknięcia nie bierze pod uwagę poprzednio klikniętego elementu. Możesz na przykład:

• przy dodawaniu tej klasy zapisać sobie referencję do tego elementu w osobnej zmiennej i przy kliknięciu w inny element zdjąć klasę z poprzedniego, albo - jeśli lista się nie zmienia - zapisz sobie indeks i odnieś się po nim do tego elementu
• ustawić listener na rodzica tej listy i przy kliknięciu przeiterować po wszystkich elementach sprawdzając, który zawiera tą klasę i wtedy ją usunąć

Na marginesie - dlaczego używasz metody Array.prototype.map? Ani nie zwracasz nic z callbacka ani nic nie robisz ze zmienną newArr (a przynajmniej nie pokazałeś tego w kodzie). W obecnym użyciu wystarczy Ci NodeList.prototype.forEach i wtedy nie musisz przerzucać listy elementów na tablicę przy użyciu spread operatora.