помогите сделать звездный рейтинг

Question

<div class="stars">
       <span class="fa fa-star " id="star" onclick="starclic()"></span>
       <span class="fa fa-star " id="star2" onclick="starclic()"></span>
       <span class="fa fa-star " id="star3"onclick="starclic()"></span>
       <span class="fa fa-star" id="star4" onclick="starclic()"></span>
       <span class="fa fa-star"id="star5" onclick="starclic()"></span>
    </div>
Css---
.fa-star {
    font-size: 5rem;
    cursor: pointer;
  }
  .fa-star-o
  {
    font-size: 5rem;
    color: yellow;
    cursor: pointer;
  }

как сделать замену класса

Answer 1

Подозреваю, что можно сделать и чисто css-решение

$(".stars .fa-star").click(function(e){
    let rating = $(this).index();
    $(this).closest('.stars')
       .find(".fa-star")
       .each(function(idx) {      
          $(this).toggleClass('active', idx <= rating);
        });
});

.fa-star {
    font-size: 5rem;
    cursor: pointer;
    color: grey;
}
.fa-star::after {
  content: '★';
}
.stars:hover .fa-star {
  color: darkOrange;
}
.stars:hover .fa-star:hover ~ .fa-star {
   color: grey;
}
.fa-star.active {
    color: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stars">
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
</div>
<div class="stars">
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
    <span class="fa fa-star"></span>
</div>

БЛОГ НА HUSL

помогите сделать звездный рейтинг

Ответы (1 шт):