什么是 raty
raty 是一个用于 jQuery 的星级评分插件。它支持半星、全星和任意图片作为星星图标，可以自定义颜色和尺寸，并提供了丰富的配置选项。
如何使用 raty
安装 raty
在终端中运行以下命令：
npm install --save-dev raty
在 HTML 中引入 jQuery 和 raty
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/raty/lib/jquery.raty.min.js"></script>
创建一个空的 div 元素作为星级评分容器
<div id="star-rating"></div>
初始化 raty
$(function() { $('#star-rating').raty({ // 配置选项 }); });可以在初始化时传入一些配置选项来自定义 raty 的行为和外观。以下是一些常用的选项：
score: 初始评分值，默认为 0。click: 是否允许用户点击修改评分，默认为 true。half: 是否启用半星评分，默认为 false。starOff: 星星未选中时的图标路径或 CSS 类名，默认为'img/star-off.png'。starOn: 星星选中时的图标路径或 CSS 类名，默认为'img/star-on.png'。starHalf: 半星的图标路径或 CSS 类名，默认为'img/star-half.png'。hints: 每个评分值对应的提示文本，可以是一个数组或函数。number: 显示几个星星，默认为 5。
例如，以下代码将创建一个半星评分，允许用户点击修改评分，显示五颗红色星星，每颗星星宽度为 32px，初始评分为 2.5 分：
-- -------------------- ---- ------- ------------ - ------------------------ ----- ----- ------ ----- -------- ----------------------- ------- ---------------------- --------- ------------------------ ------ ----- ----- ---- ----- ------ ------- -- ----- --- ------ --- --- ---
总结
通过本教程，您学习了如何使用 npm 包 raty 来在前端实现星级评分。raty 提供了丰富的配置选项，可以根据需求自定义评分的行为和外观。希望这篇文章能够帮助您更好地掌握 raty 的使用方法，并为您今后的开发工作提供一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34287