jquery实现类似淘宝星星评分功能实例

引入jQuery

首先，在网页中引入jQuery库，可以从jQuery官网下载最新版本，也可以使用CDN加速服务来引用jQuery，例如：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

HTML结构

在页面HTML中，需要创建一个容器元素用于显示星星评分，例如：

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

其中每个星星评分都使用一个<span>元素来表示，将它们放在外层容器元素.rating中。

CSS样式

为星星评分添加CSS样式，例如：

.rating {
  display: inline-block;
  font-size: 0;
  height: 24px;
  position: relative;
  width: 120px;
}

.star {
  background: url('star.png') no-repeat 0 0;
  display: inline-block;
  height: 24px;
  width: 24px;
}

.star:hover,
.star:hover ~ .star {
  background-position: 0 -24px;
}

.star.active,
.star.active ~ .star {
  background-position: 0 -48px;
}

在上述样式中，.rating指定外层容器的大小和布局，.star指定星星评分的样式，包括背景图片、大小等内容。使用background-position属性对星星的状态进行控制，由active类和hover伪类设置不同的背景位置。

JavaScript代码

在页面加载完成时，为星星评分添加事件监听器，例如：

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

  $('.star').hover(function() {
    $(this).addClass('hover').prevAll('.star').addClass('hover');
    $(this).nextAll('.star').removeClass('hover');
  }, function() {
    $('.star').removeClass('hover');
  });
});

在上述代码中，$(document).ready()方法用于在页面加载完成后执行代码。.star元素的click()方法用于为星星评分添加点击事件的监听器，通过为选中的星星添加active类和其前面的所有星星也添加active类的方式来实现星星评分的交互效果。.star元素的hover()方法用于添加鼠标移动事件的监听器，根据鼠标位置改变星星的样式，并通过移除所有星星的hover类来实现取消鼠标移动事件的效果。

示例说明

（1）动态输出星星评分

对于需要把星星评分的结果提交给服务器的情况，可以在JavaScript代码中添加一个变量来保存当前的星星评分，例如：

var rating = 0; // 初始评分值为0

$('.star').click(function() {
  var index = $(this).index() + 1; // 获取当前点击的星星的索引值
  rating = index; // 更新评分值

  $(this).addClass('active').prevAll('.star').addClass('active');
  $(this).nextAll('.star').removeClass('active');
});

此时，在需要提交评分值的时候，可以将rating变量的值发送给服务器，例如：

$.ajax({
  url: 'rating.php',
  type: 'POST',
  data: { rating: rating },
  success: function(response) {
    // 处理服务器返回的响应内容
  }
});

（2）显示当前平均评分

对于需要显示当前产品的平均评分的情况，可以在JavaScript代码中使用数据接口来获取所有用户的评分并计算平均值，例如：

$.ajax({
  url: 'ratings.php',
  type: 'GET',
  success: function(response) {
    var ratings = JSON.parse(response); // 将评分数据解析为JSON格式
    var total = 0, count = ratings.length;

    for (var i = 0; i < count; i++) {
      var rating = parseInt(ratings[i].rating);
      total += rating;
    }

    var average = count > 0 ? total / count : 0; // 计算平均值

    // 显示平均评分
    $('.rating').attr('title', '平均评分为：' + average.toFixed(1) + ' 分');
  }
});

在此示例中，ratings.php文件返回一个JSON格式的数据，包括所有用户的评分，例如：

[
  { "rating": "4" },
  { "rating": "5" },
  { "rating": "3" },
  { "rating": "2" }
]

通过遍历所有评分数据并计算平均值，可以得到当前产品的平均评分，并将其显示在星星评分的外层容器中。使用attr()方法来更新容器元素的title属性，在鼠标悬停在容器上时显示平均评分的数值。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现类似淘宝星星评分功能实例 - Python技术站

jquery实现类似淘宝星星评分功能实例

相关文章