星级评价案例
星级评价:网上购物订单完成后,一般会显示评价功能。
最常见的评价方式就是星级评价,点亮的星星越多,表示用户的满意度越高
那么它是如何实现的呢??? 让我们一起看看代码
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
ul {
padding-left: 0;
overflow: hidden;
}
ul li {
float: left;
list-style: none;
width: 27px;
height: 27px;
background: url(jq+img/star.gif)
}
ul li a {
display: block;
width: 100%;
padding-top: 27px;
overflow: hidden;
}
ul li.light {
background-position: 0 -29px;
}
</style>
<script src="jq+img/jquery-3.6.0.js"></script>
</head>
<body>
<h1>星级评价</h1>
<hr/>
<ul class="comment">
<li class="light"></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
$(function (){
$('.comment>li').mouseover(function (event){ //当鼠标指针位于元素上方时，会发生 mouseover 事件。
$(this).addClass('light').prevAll('li') //addClass() 方法向被选元素添加一个或多个类。
.addClass('light');
$(this).nextAll('li').removeClass('light'); //removeClass() 方法从被选元素移除一个或多个类。
});
$('.comment>li').click(function (event){ //removeAttr() 方法从被选元素中移除属性。attr() 方法设置或返回被选元素的属性值。
$(this).attr('light','on').siblings('li').removeAttr('light'); //siblings() 方法返回被选元素的所有同级元素
// 同级元素是共享相同父元素的元素。
});
$('.comment>li').mouseout(function (event){
$('.comment').find('li').removeClass('light');
$('.comment>li[light=on]').addClass('light')
.prevAll('li').addClass('light');
});
})
</script>
</body>
</html>
运行结果:
鼠标经过2颗星星时,是2颗星，经过5颗星星时,是五颗星星
掌握 :addClass() 方法向被选元素添加一个或多个类。
removeClass() 方法从被选元素移除一个或多个类。
removeAttr() 方法从被选元素中移除属性。attr() 方法设置或返回被选元素的属性值。
siblings() 方法返回被选元素的所有同级元素 同级元素是共享相同父元素的元素
案例图片：
