Wyróżnianie wybranej miniatury klasą aktywna
Treść zadania
W galerii znajdują się dwie miniatury:<img class="ramka-mini aktywna" id="m1" src="1.jpg">
<img class="ramka-mini" id="m2" src="2.jpg">
Napisz obsługę: po kliknięciu dowolnej miniatury o klasie .ramka-mini usuń klasę 'aktywna' ze wszystkich miniatur .ramka-mini, po czym dodaj klasę 'aktywna' tylko do klikniętej miniatury (this.classList.add('aktywna')).
Co będzie oceniane
- Pobranie miniatur .ramka-mini.
- Usunięcie klasy 'aktywna' z poprzednich miniatur.
- Nadanie klasy 'aktywna' klikniętej miniaturze #m2.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Kliknięcie miniatury 2 przenosi klasę aktywna z m1 na m2 — licznik #m1.aktywna = 0; klasa #m2 = aktywna
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Zarządzaj klasą 'aktywna' na klikniętych miniaturach .ramka-mini
Wskazówki
Wskazówka 1
Przed nadaniem aktywnego stanu nowemu elementowi najprościej jest zdjąć aktywną klasę ze wszystkich elementów danej grupy w pętli.
Wskazówka 2
Przejdź po miniaturach, zarejestruj kliknięcie i w funkcji obsługi najpierw usuń klasę aktywna ze wszystkich obiektów kolekcji, a następnie dodaj ją do klikniętego elementu.