一个非常简单和轻量级的jQuery星级评定插件，它将评定值存储在一个隐藏的输入字段中。用户可以点击星星对产品进行评分，并查看正在更新的价值。

如何使用它:

1.创建一个空的DIV容器来容纳星级评定系统。

<div id="rating"></div>

2.下载并加载评分.jsjQuery之后的脚本。

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

3.初始化插件以生成默认的星级评定系统。

rating.create({
  'selector': '#rating'
});

4.它会自动将以下HTML元素添加到页面中。

<div id="rating">
  <input type="hidden" name="rating" value="3">
  <img src="selectedStar.svg" data-position="1">
  <img src="selectedStar.svg" data-position="2">
  <img src="selectedStar.svg" data-position="3">
  <img src="unselectedStar.svg" data-position="4">
  <img src="unselectedStar.svg" data-position="5">
</div>

5.覆盖默认评级符号。

rating.create({
  'selector': '#rating',
  // use Font Awesome Icons
  'unselectedIcon': 'fa fa-star-o red-font',
  'selectedIcon': 'fa fa-star',
});

6.设置最大星星数。默认值：5。

rating.create({
  'selector': '#rating',
  'outOf': 10,
});

7.设置初始额定值。默认值：3。

rating.create({
  'selector': '#rating',
  'defaultRating': 4,
});

8.设置隐藏输入的名称。默认值：“评级”。

rating.create({
  'selector': '#rating',
  'name': 'my-name',
});

9.向星形添加额外的CSS类。默认值：null。

rating.create({
  'selector': '#rating',
  'ratingClass': 'class-1 class-2',
});

预览截图

简单星级输入插件 jQuery Rating.js