• 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
51 wizyt
pytanie zadane 9 stycznia w JavaScript, jQuery, AJAX przez użytkownika redstar1 Bywalec (2,070 punkty)

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 użytkownika Kornelia Kobiela Pasjonat (18,090 punkty)
wybrane 9 stycznia przez użytkownika 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 użytkownika Comandeer Ekspert (327,190 punkty)

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
2 odpowiedzi 46 wizyt
pytanie zadane 13 czerwca 2016 w JavaScript, jQuery, AJAX przez użytkownika luke97 Obywatel (1,300 punkty)
0 głosów
1 odpowiedź 61 wizyt
pytanie zadane 29 maja 2016 w JavaScript, jQuery, AJAX przez użytkownika ormu16 Mądrala (5,140 punkty)
0 głosów
1 odpowiedź 49 wizyt
pytanie zadane 18 grudnia 2016 w C i C++ przez użytkownika Jan Dobrakowski Użytkownik (580 punkty)
...