js宝贝评价

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宝贝评价</title>
<style>
  .star { cursor: pointer; }
</style>
</head>
<body>

<div id="rating">
  <span class="star" data-value="1">&#9733;</span>
  <span class="star" data-value="2">&#9733;</span>
  <span class="star" data-value="3">&#9733;</span>
  <span class="star" data-value="4">&#9733;</span>
  <span class="star" data-value="5">&#9733;</span>
</div>

<script>
  const stars = document.querySelectorAll('.star');
  let selectedRating = 0;

  stars.forEach(star => {
    star.addEventListener('click', function() {
      selectedRating = this.getAttribute('data-value');
      highlightStars(selectedRating);
      // 这里可以添加AJAX请求，将评分发送到服务器
    });
  });

  function highlightStars(rating) {
    stars.forEach((star, index) => {
      if (index < rating) {
        star.style.color = 'gold';
      } else {
        star.style.color = 'black';
      }
    });
  }
</script>

</body>
</html>