jquery星级评分css代码
时间: 2024-06-17 22:03:39 浏览: 12
jQuery星级评分可以通过CSS来实现,以下是一个简单的例子:
HTML代码:
```
<div class="star-rating">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
```
CSS代码:
```
.star-rating {
font-size: 0;
}
.star-rating .star {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
background: url(star.png) no-repeat left top;
}
.star-rating .star.active {
background-position: left bottom;
}
```
上面的代码中,我们使用了一个`star.png`的图片,它包含了两个状态的星星:未选中和选中。在CSS代码中,我们将每个星星定义为一个`div`元素,并设置它们的宽度、高度、间距和背景图像。同时,我们将父容器的字体大小设置为0,以消除行内元素之间的空白间距。
在用户进行评分时,我们可以使用JavaScript/jQuery来动态地添加或删除`.active`类,从而改变星星的背景位置,实现星级评分的效果。
相关问题
jquery星级评分代码
以下是一个使用jQuery制作的星级评分代码的示例:
```html
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="rating" class="rating-value" value="0">
</div>
```
```javascript
$(document).ready(function(){
$('.star-rating .fa').click(function(){
var rating = $(this).data('rating');
$(this).parent().find('.fa').removeClass('fa-star').addClass('fa-star-o');
$(this).removeClass('fa-star-o').addClass('fa-star');
$(this).parent().find('.rating-value').val(rating);
});
});
```
这段代码创建了一个包含五个星星的星级评分,当用户点击其中一个星星时,它会变成实心的,同时将评分值存储在一个隐藏的输入字段中。
jquery 星星评分
以下是使用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)
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)