System gwiazdek

Question

Cześć Mam pytanie jak mogę zrobić aby jak kliknę gwiazdkę o 5 aby wszystkie gwiazdki się zaznaczyły jak kliknę 4 aby 4 się zaznaczyły itd ?

<div>
    <h2>Oceń użytkownika</h2>
    <i class="empty icon-star-empty"></i>
    <i class="empty icon-star-empty"></i>
    <i class="empty icon-star-empty"></i>
    <i class="empty icon-star-empty"></i>
    <i class="empty icon-star-empty"></i>
</div>

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script>
        
    $('.empty').hover(function () {
        $(this).addClass('icon-star').removeClass("icon-star-empty");
    }, function () {
        $(this).addClass('icon-star-empty').removeClass("icon-star");
    });
</script>

 

Answer 1

Proponuje Ci zrobić tak:

1) Pobierasz sobie wszystkie elementy gwiazdek (querySelectorAll, prawdopodobniej będą ustawione pokolei, ale sprawdź)

2) Zapinasz click event na wszystkie gwiazdki, na tym evencie sprawdzasz, którą gwiazdkę kliknąłeś (po klasie, albo id, albo jeszcze inaczej - do Twojej decyzji)

3) W zależności którą gwiazdkę kliknąłeś (kolejność), nadajesz odpowiednią klasę elementom od 0 do klikniętej pozycji

4) Przy zmianie musisz zadbać aby zresetować klasy do niezaznaczonych i zaznaczyć jeszcze raz (może być mignięcie) lub pamiętać ile jest zaznaczonych i nadawać klasy tylko odpowiednim elementom (trudniejsze, ale pewniejsze)

Oczywiście jest milion innych sposobów na osiągnięcie tego, to jest tylko moja propozycja. Dawaj znać czy wyszło.

Pzdr