dodawanie i usuwanie klasy js

Question

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ć?

Answer 1

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.

Comments

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 ;)).