• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmiana kolorów w linkach navigacji JS

VPS Starter Arubacloud
0 głosów
115 wizyt
pytanie zadane 27 czerwca 2019 w JavaScript przez Apper97 Obywatel (1,380 p.)

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

1 odpowiedź

0 głosów
odpowiedź 27 czerwca 2019 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 18 września 2019 przez Apper97
 
Najlepsza

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.

Podobne pytania

0 głosów
1 odpowiedź 79 wizyt
0 głosów
1 odpowiedź 549 wizyt
pytanie zadane 15 kwietnia 2016 w JavaScript przez clamsioPL Nowicjusz (190 p.)
0 głosów
0 odpowiedzi 359 wizyt
pytanie zadane 12 stycznia 2019 w JavaScript przez kacperl95 Obywatel (1,980 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...