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

dodawanie i usuwanie klasy js

0 głosów
104 wizyt
pytanie zadane 9 stycznia w JavaScript, jQuery, AJAX przez redstar1 Bywalec (2,110 p.)

Mam sobie kilka elementów klasy list-group-item i teraz chcę zrobić aby po kliknięciu w jakiś konkretny przypisała mu się klasa active

$( ".list-group-item" ).click(function() {
  	$(this).addClass( "active" );
	});

Z tym nie ma problemu ale teraz muszę mieć jeszcze tak, że po kliknięciu w inny element to jemu się pojawia klasa active ale temu poprzedniemu znika a np removeClass pod add nie działa. Czy jest jakiś sposób aby to zrobić?

1 odpowiedź

+1 głos
odpowiedź 9 stycznia przez Kornelia Kobiela Nałogowiec (31,240 p.)
wybrane 9 stycznia przez redstar1
 
Najlepsza

Nie wiem jak to jest w jQuery, ale biorąc pod uwagę czystego JS-a, to możesz zrobić tak:

  • Bierzesz wszystkie elementy danej klasy.
  • Każdemu z nich nadajesz Event Listener na click.
  • Reakcją na zdarzenie jest nadanie klasy active właśnie klikniętemu elementowi.
  • Usunięcie wszystkim pozostałym.

JS udostępnia do tego specjalną metodę classList.toggle('nazwa klasy)', która zmienia stan kasy ( dodaje jeśli jej nie ma, odejmuje, jeśli jest). Z pewnością jQuery ma coś podobnego. Żeby wiedzieć o co mi chodzi, spójrz na kawałek mojego kodu: Github

W linii 21 jest właśnie taka funkcja, która zajmuje się dokładnie tym samym.

1
komentarz 9 stycznia przez Comandeer Ekspert (346,600 p.)

Można też przypiąć jeden handler, dla całej listy i poslugiwać się event.target zamiast this (BTW w dobie ES6 i arrow function używanie this i tak raczej już nie przejdzie ;)).

Podobne pytania

0 głosów
1 odpowiedź 61 wizyt
pytanie zadane 4 lutego w JavaScript, jQuery, AJAX przez Bakr Gaduła (4,000 p.)
0 głosów
1 odpowiedź 50 wizyt
0 głosów
1 odpowiedź 47 wizyt
pytanie zadane 26 lutego w JavaScript, jQuery, AJAX przez witkobar Nowicjusz (140 p.)
...