jquery实现星级评价功能

随着互联网的普及和在线购物的兴起，星级评价功能已成为各种网站和应用程序中不可或缺的一部分，用户可以通过星级评价来表达对产品或服务的满意度，而商家则可以通过这些评价了解客户的需求和改进点，在这个过程中，jQuery作为一个流行的JavaScript库，可以帮助开发者轻松实现星级评价功能，本文将详细介绍如何使用jQuery来实现一个简单且高效的星级评价系统。

我们需要创建一个HTML结构来展示星级评价，这里我们使用五个嵌套的标签来表示五个星级，每个标签包含一个类名"star"和一个数据属性"rate"，表示星级的值。

<div class="rating">
  <input type="radio" name="rate" class="star" data-rate="1" checked>
  <input type="radio" name="rate" class="star" data-rate="2">
  <input type="radio" name="rate" class="star" data-rate="3">
  <input type="radio" name="rate" class="star" data-rate="4">
  <input type="radio" name="rate" class="star" data-rate="5">
</div>

接下来，我们需要为这些星级添加一些样式，这里我们使用CSS来为星级添加颜色和大小，以及在鼠标悬停时改变星级的颜色。

.rating input[type="radio"] {
  display: none;
}
.rating label {
  float: right;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background: url('star.png') 0 0;
}
.rating input[type="radio"]:checked + label,
.rating label:hover,
.rating label:hover ~ label {
  background-position: 0 -50px;
}

jquery实现星级评价功能

现在我们已经为星级评价创建了基本的HTML结构和样式，接下来我们将使用jQuery来实现星级评价的交互功能，我们需要为每个星级绑定点击事件，当用户点击某个星级时，我们将更新页面上的显示星级以及隐藏的输入框的值。

$(document).ready(function() {
  // 绑定星级点击事件
  $('.star').on('click', function() {
    // 更新显示的星级
    var rate = $(this).data('rate');
    var rating = $('.rating');
    rating.find('label').removeClass('rated');
    for (var i = 0; i < rate; i++) {
      rating.find('label').eq(i).addClass('rated');
    }
    // 更新隐藏的输入框的值
    rating.find('input[type="radio"]').prop('checked', false);
    rating.find('input[type="radio"]').eq(rate - 1).prop('checked', true);
  });
});

至此，我们已经实现了一个基本的星级评价功能，用户可以通过点击星级来选择评分，页面上的显示星级和隐藏的输入框将根据用户的选择进行更新，这个功能可以广泛应用于各种网站和应用程序，帮助用户更好地表达他们的满意度。

jquery实现星级评价功能