star-rating.js是一个简单、轻便、响应迅速、可定制、美观的星级评定系统，使用jQuery和Font Awesome 6标志性字体构建。

特征：

• 自定义评级符号。
• 自定义星形尺寸。
• 允许指定星星的数量。
• 自定义反馈消息。
• 将评分值存储在隐藏的输入中。

如何使用它:

1.加载jquery.star-rating.jsjQuery库之后的JavaScript。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.star-rating.js"></script>

2.加载最新的Font Awesome Iconic Font for stars字体。通过覆盖图标选项，您可以使用任何其他图标库，甚至可以使用表情符号作为星号（参见下文）。

<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />

3.创建一个DIV容器来容纳评级系统。

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

4.调用DIV容器上的函数来创建默认的五星评级系统。

$('.rating').starRating({
  // ...
});

5.定制星星。

$('.rating').starRating({
  starIconEmpty: 'far fa-star',
  starIconFull: 'fas fa-star',
  starColorEmpty: 'lightgray',
  starColorFull: '#FFC107',
  starsSize: 4, // em
  stars: 5,
});

6.自定义反馈消息。

$('.rating').starRating({
  showInfo: true,
  titles: ["Very Bad", "Poorly", "Medium", "Good", "Excellent!"],
});

7.自定义隐藏评级输入的名称。

$('.rating').starRating({
  inputName: 'rating',
});

8.当额定值发生变化时，触发一个功能。

$(document).on('change', '.rating', function (e, stars, index) {
  alert(`Thx for ${stars} stars!`);
});

更新日志：

2022-11-05

• 请改用Font Awesome 6.x

预览截图

jQuery和字体 简易星级评定系统真棒 Star Rating.js