jQuery Raty星级评分插件使用方法

封面图 • 2025-10-13 • jQuery

jQuery Raty 是一个轻量级的星级评分插件，可以用于在网页中实现用户对内容进行星级评分的功能。它支持多种配置选项，如评分大小、是否可点击、是否显示提示信息等。

---

## ✅ 一、引入 jQuery 和 Raty 插件

首先你需要在 HTML 文件中引入 **jQuery** 和 **Raty 的 JS/CSS 文件**。

```html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/raty/2.7.0/jquery.raty.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/raty/2.7.0/jquery.raty.min.js"></script>
```

> 如果你使用的是本地资源，请确保路径正确。

---

## ✅ 二、HTML 结构

在页面中添加一个 `div` 或 `input` 元素作为评分容器：

```html
<div id="star-rating"></div>
```

或者使用 `<input type="hidden">` 来存储评分值：

```html
<input type="hidden" id="star-rating" />
```

---

## ✅ 三、初始化 Raty

使用 jQuery 初始化 Raty：

```javascript
$(function() {
    $('#star-rating').raty({
        // 配置项
        starOff: 'img/star-off.png',   // 未选中的星星图片
        starOn: 'img/star-on.png',     // 选中的星星图片
        score: 3,                      // 默认评分（可选）
        readOnly: false,               // 是否只读
        hints: ['非常差', '差', '一般', '好', '非常好'], // 提示文字
        click: function(score) {
            alert('你选择了：' + score);
        }
    });
});
```

---

## ✅ 四、常用配置项说明

| 属性 | 类型 | 说明 |
|------|------|------|
| `score` | number | 默认评分值（1~5） |
| `readOnly` | boolean | 是否只读 |
| `starOff` | string | 未选中星星的图片路径 |
| `starOn` | string | 选中星星的图片路径 |
| `hints` | array | 每个评分对应的提示文字数组 |
| `cancel` | boolean | 是否显示“取消”按钮 |
| `cancelPlace` | string | “取消”按钮的位置（'left' 或 'right'） |
| `click` | function(score) | 点击评分后的回调函数 |
| `number` | number | 显示多少颗星（默认是5） |

---

## ✅ 五、获取和设置评分值

### 获取当前评分值：

```javascript
var currentScore = $('#star-rating').raty('score');
console.log(currentScore);
```

### 设置评分值（只读模式下不可更改）：

```javascript
$('#star-rating').raty('score', 4);
```

---

## ✅ 六、完整示例

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Raty 星级评分示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/raty/2.7.0/jquery.raty.min.css">
</head>
<body>

</body>
</html>
```

---

## ✅ 七、注意事项

- 如果你使用了自定义的星星图片，请确保路径正确。
- 如果你希望评分后提交到服务器，可以通过 `click` 回调函数获取分数并发送 AJAX 请求。
- Raty 不依赖任何其他库，但需要 jQuery。

---

如果你有更具体的需求（比如动态加载评分、异步提交等），也可以告诉我，我可以帮你进一步实现。