• 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

Object Storage Arubacloud
0 głosów
122 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ź 81 wizyt
0 głosów
1 odpowiedź 605 wizyt
pytanie zadane 15 kwietnia 2016 w JavaScript przez clamsioPL Nowicjusz (190 p.)
0 głosów
0 odpowiedzi 372 wizyt
pytanie zadane 12 stycznia 2019 w JavaScript przez kacperl95 Obywatel (1,980 p.)

92,661 zapytań

141,553 odpowiedzi

319,995 komentarzy

62,028 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...