星级评分原理和实现方式

最新推荐文章于 2024-06-19 15:33:49 发布

lucky芬

最新推荐文章于 2024-06-19 15:33:49 发布

阅读量2.7k

点赞数

分类专栏：前端小知识

本文链接：https://blog.csdn.net/daimomo000/article/details/76849784

版权

前端小知识专栏收录该内容

26 篇文章 2 订阅

订阅专栏

看视频内容记录一下。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>星级评分-第一种实现方式</title>
	<style>
		body,ul,li{
			padding:0;
			margin:0;
		}
		li{
			list-style-type: none;
		}
		.rating{
			width:170px;
			height: 34px;
			margin:100px auto;
		}
		.rating-item{
			float: left;
			width: 34px;
			height: 34px;
			background: url(http://i.niupic.com/images/2017/05/31/iVPGGC.png) no-repeat;
			cursor: pointer;
		}
	</style>
</head>
<body>
<ul id="rating" class="rating">
	<li class="rating-item" title="很不好"></li>
	<li class="rating-item" title="不好"></li>
	<li class="rating-item" title="一般"></li>
	<li class="rating-item" title="好"></li>
	<li class="rating-item" title="很好"></li>
</ul>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script>
var num=2,
     $rating=$("#rating"),
     $item=$rating.find(".rating-item");
//点亮
var lightOn=function(num){
	$item.each(function(index){
		if(index<num){
			$(this).css('background-position','0px -40px');
		}else{
			$(this).css('background-position','0px 0px');
		}
	});
}
//初始化
lightOn(num);
//事件绑定
$item.on('mouseover',function(){
	lightOn($(this).index()+1);
}).on('click',function(){
	num=$(this).index()+1;
});
$rating.on('mouseout',function(){
	lightOn(num);
});
</script>
</body>
</html>

改进js代码 用事件委托。

<script>
var num=2,
	$rating=$("#rating"),
	$item=$rating.find(".rating-item");
//点亮
var lightOn=function(num){
	$item.each(function(index){
		if(index<num){
			$(this).css('background-position','0px -40px');
		}else{
			$(this).css('background-position','0px 0px');
		}
	});
}
//初始化
lightOn(num);
//事件委托，将子元素的事件委托给父元素处理
$rating.on('mouseover','.rating-item',function(){
	lightOn($(this).index()+1);
}).on('click','.rating-item',function(){
	num=$(this).index()+1;
}).on('mouseout',function(){
	lightOn(num);
});
</script>

lucky芬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
星级评分原理和实现方式

看视频内容记录一下。星级评分-第一种实现方式 body,ul,li{ padding:0; margin:0; } li{ list-style-type: none; } .rating{ width:170px; height: 34px; margin:100px auto; } .rating-item{
复制链接

扫一扫

专栏目录