如何使用JQuery实现星级评级

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="rating-container">
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</div>

.rating-container {
  font-size: 0; /* 清除内联元素间的空格 */
}

.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(star-empty.png);
  background-size: cover;
}

.star.active {
  background-image: url(star-filled.png);
}

$(document).ready(function() {
  $(".star").mouseenter(function() {
    $(this).prevAll().addBack().addClass("active");
    $(this).nextAll().removeClass("active");
  });
  
  $(".star").click(function() {
    $(this).prevAll().addBack().addClass("active");
    $(this).nextAll().removeClass("active");
    
    // 在这里执行保存评级的操作，例如发送请求到服务器保存评级数据
  });
  
  $(".rating-container").mouseleave(function() {
    // 在鼠标离开评级容器时，根据实际评级情况重新设置星级的显示
    var rating = $(".star.active").length;
    $(".star").removeClass("active");
    $(".star").eq(rating - 1).prevAll().addBack().addClass("active");
  });
});