jQuery 实现打星评分功能

本文介绍了如何使用 jQuery 实现一个简单的打星评分功能，并提供了相应的代码示例。

什么是打星评分功能？

打星评分功能是一种常见的评价系统，它允许用户根据自己的喜好或满意度给予产品、服务或文章等一个星级评分。打星评分通常用于电影、餐厅、产品评论等场景中，帮助其他用户了解他人的评价和推荐。

打星评分功能的实现原理

打星评分功能的实现原理很简单：根据用户的操作，改变星星的状态，并记录用户的评分。

在本文中，我们使用 jQuery 实现打星评分功能。jQuery 是一个功能强大且易于使用的 JavaScript 库，它提供了许多方便的方法和工具来处理 DOM 操作、事件处理、动画效果等。

实现步骤

第一步：创建 HTML 结构

首先，我们需要创建一个星星评分的 HTML 结构。一个常见的实现方式是使用一个包含五个星星的容器，并为每个星星添加一个按钮。

<div class="rating">
  <button class="star"></button>
  <button class="star"></button>
  <button class="star"></button>
  <button class="star"></button>
  <button class="star"></button>
</div>

第二步：添加 CSS 样式

为了让星星具有可点击和变化样式的效果，我们需要添加一些 CSS 样式。

.rating {
  font-size: 0;
}

.star {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url(star-empty.png);
  background-size: cover;
  border: none;
  cursor: pointer;
}

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

上述代码中，我们使用了两张图片来表示空星和满星的状态。你可以根据自己的需要替换这些图片。

第三步：实现 JavaScript 逻辑

现在，我们需要使用 jQuery 来实现星星的点击和变化逻辑。

$(document).ready(function(){
  $('.star').click(function(){
    $(this).addClass('filled');
    $(this).prevAll().addClass('filled');
    $(this).nextAll().removeClass('filled');
  });
});

上述代码中，我们首先通过 $(document).ready() 方法来确保页面加载完成后再执行代码。然后，我们通过 $('.star') 来选取所有的星星按钮，并使用 click() 方法来监听点击事件。当用户点击某个星星时，我们使用 addClass() 方法来为当前星星和它之前的星星添加 filled 类，表示它们被选中了；同时，我们使用 removeClass() 方法来移除其它星星的 filled 类。

第四步：记录用户评分

最后，我们可以通过记录用户点击的星星数量来获取用户的评分。

$(document).ready(function(){
  $('.star').click(function(){
    var rating = $(this).prevAll().length + 1;
    console.log('用户评分：' + rating);
  });
});

上述代码中，我们使用 prevAll() 方法获取当前星星之前的所有星星，并使用 length 属性得到星星数量（即用户的评分）。然后，我们可以将评分输出到控制台，或者将其发送到服务器进行进一步处理。

完整代码示例

下面是一个完整的示例代码，你可以将其复制到 HTML 文件中并进行测试。

<!DOCTYPE html>
<html>
<head>
  <title>打星评分功能</title>
  <style>
    .rating {
      font-size: 0;
    }
    
    .star {
      display: inline-block;
      width: 30px;
      height: 30px;
      background-image: url(star-empty.png);
      background-size: cover;
      border: none;
      cursor: pointer;
    }
    
    .star.filled {
      background-image: url(star-filled.png);
    }
  </style>
  <script src="
  <script>
    $(document).ready(function(){
      $('.star').click(function(){
        $(this).addClass('filled');
        $(this).prev