jquery 星星评分
时间: 2023-11-20 08:59:36 浏览: 69
以下是使用jQuery实现星星评分的示例代码:
```html
<!-- 在HTML中添加一个包含五个空白星星的容器 -->
<div class="stars">
<img src="img/star.png" class="star" data-value="1">
<img src="img/star.png" class="star" data-value="2">
<img src="img/star.png" class="star" data-value="3">
<img src="img/star.png" class="star" data-value="4">
<img src="img/star.png" class="star" data-value="5">
</div>
```
```javascript
// 在JavaScript中添加以下代码
$(document).ready(function() {
// 给每个星星添加点击事件
$('.star').click(function() {
// 获取当前星星的值
var value = $(this).data('value');
// 将所有星星设置为未选中状态
$('.star').attr('src', 'img/star.png');
// 将当前星星和之前的星星设置为选中状态
for (var i = 1; i <= value; i++) {
$('.star[data-value="' + i + '"]').attr('src', 'img/starSel.png');
}
// 将评分提交到服务器
commitScore(value);
});
});
// 提交评分到服务器的函数
function commitScore(score) {
var arr = [];
for (var i = 1; i <= 5; i++) {
if (i <= score) {
arr.push(1);
} else {
arr.push(0);
}
}
console.log(arr);
}
```
以上代码实现了一个简单的星星评分功能,用户可以点击星星来选择评分,然后将评分提交到服务器。在提交评分的过程中,使用了一个数组来表示评分,数组中的每个元素都是0或1,0表示未选中,1表示选中。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)