基于jQuery实现的美观星级评论打分组件代码

下面是关于“基于jQuery实现的美观星级评论打分组件代码”的完整攻略及两条示例说明。

一、前置内容

在讲解代码实现之前，我们需要先简单介绍一下前置内容。

1.1 jQuery

jQuery是一个快速、简洁的JavaScript框架，它可以简化HTML文档遍历、事件处理、动画设计和AJAX交互等操作。因此，本组件的实现需要使用jQuery。

1.2 FontAwesome

FontAwesome是一个免费的字体图标集，包含了大量图标，其中包括了星级打分组件所需要的星星图标。因此，本组件的实现需要使用FontAwesome。

二、HTML结构

本组件的HTML结构分为两部分：展示区和打分区。

2.1 展示区

展示区用于显示当前的分数和总分数。

<div class="score">
  <span class="current-score"></span>
  <span class="divider">/</span>
  <span class="total-score"></span>
</div>

其中，.current-score用于显示当前的分数，.total-score用于显示总分数，.divider用于分隔符。

2.2 打分区

打分区显示了五颗星星，用于用户进行打分。

<div class="rating">
  <span class="fa fa-star-o" data-score="1"></span>
  <span class="fa fa-star-o" data-score="2"></span>
  <span class="fa fa-star-o" data-score="3"></span>
  <span class="fa fa-star-o" data-score="4"></span>
  <span class="fa fa-star-o" data-score="5"></span>
</div>

其中，.rating是星级评分的外层容器，.fa是FontAwesome字体图标的类名，data-score属性表示对应的分数。

三、CSS样式

本组件的样式使用了CSS3的transition和transform属性，来实现星星的动画效果。

.rating .fa {
  font-size: 26px;
  color: #ccc;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.rating .fa:hover,
.rating .fa:hover ~ .fa {
  color: #ffae00;
}
.rating .fa.active {
  color: #ffae00;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

其中，.fa类用于设置FontAwesome图标的通用样式，.active表示被选中的星星样式。

四、JavaScript代码

本组件主要使用了jQuery来实现交互操作。

$(function () {
  var rating = $(".rating");
  var currentScore = rating.data("current-score"); // 获取当前分数
  var totalScore = rating.data("total-score"); // 获取总分数

  updateScore(currentScore, totalScore); // 更新分数显示

  rating.on("click", ".fa-star-o", function () { // 绑定点击事件
    var score = $(this).data("score"); // 获取分数
    updateScore(score, totalScore); // 更新分数显示
    $(this).addClass("active").prevAll().addClass("active"); // 添加active样式
    $(this).nextAll().removeClass("active"); // 移除active样式
  });

  // 更新分数显示
  function updateScore(currentScore, totalScore) {
    $(".current-score").text(currentScore);
    $(".total-score").text(totalScore);
  }
});

其中，.rating用于获取星级评分的外层容器，.data()用于获取自定义属性值，.on()用于绑定点击事件，.addClass()、.removeClass()用于添加或移除样式。

五、示例说明

下面提供两个示例：

5.1 示例一：默认分数为3分

<div class="rating" data-current-score="3" data-total-score="5">
  <span class="fa fa-star-o" data-score="1"></span>
  <span class="fa fa-star-o" data-score="2"></span>
  <span class="fa fa-star-o" data-score="3"></span>
  <span class="fa fa-star-o" data-score="4"></span>
  <span class="fa fa-star-o" data-score="5"></span>
</div>
<div class="score">
  <span class="current-score"></span>
  <span class="divider">/</span>
  <span class="total-score"></span>
</div>

其中，.rating的data-current-score属性值为3，表示默认分数是3分，data-total-score属性值为5，表示总分数是5分。

5.2 示例二：通过JavaScript设置分数

<div class="rating">
  <span class="fa fa-star-o" data-score="1"></span>
  <span class="fa fa-star-o" data-score="2"></span>
  <span class="fa fa-star-o" data-score="3"></span>
  <span class="fa fa-star-o" data-score="4"></span>
  <span class="fa fa-star-o" data-score="5"></span>
</div>
<div class="score">
  <span class="current-score"></span>
  <span class="divider">/</span>
  <span class="total-score"></span>
</div>
<script>
  $(function () {
    // 设置分数为4分
    $(".rating .fa-star-o[data-score='4']").trigger("click");
  });
</script>

其中，JavaScript代码通过.trigger()方法触发了分数为4分的星星的点击事件。