jQuery编写动态评分小星星的插件

最新推荐文章于 2024-08-27 12:18:37 发布

紫枫叶520

最新推荐文章于 2024-08-27 12:18:37 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript和jQuery 文章标签： jquery javascript html 动态评分星星

本文链接：https://blog.youkuaiyun.com/zifengye520/article/details/52166482

javascript和jQuery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一款使用jQuery实现的动态评分插件，通过简单的HTML结构配合jQuery事件处理，实现了鼠标悬停预览评分、点击确认评分及评分结果显示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作需要，同事用js写了一个动态的评分小星星的插件，感觉很有兴趣，于是捉摸着，用jQuery写了一个小插件。

一、主要思路

1 把静态的，没有效果的星星模型做出来，用css把样式调整好。

2 当鼠标放上去，会获得当前星星的索引index，然后遍历所有的星星元素，根据索引，比当前index小的星星，全部点亮，并且后面显示的文字会随着index变化而变化。

3 当点击鼠标时，会先将所有的星星熄灭，然后获得点击星星的索引index，遍历星星元素，根据当前索引来点亮星星，并且将（index+1）作为评分，放到隐藏域中。

4 当移开鼠标时，会先将所有的星星熄灭，然后获取隐藏域中的值score，如果score=0，所有星星熄灭，如果score有值，说明之前点亮过，那么根据score-作为判断，遍历所有星星，将索引小于score的星星点亮，并且根据score显示相应的文字。

页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>星星特效</title>
	</head>

	<style type="text/css">
		
		.starBox{
			border:1px solid;
			width:350px;
			height:50px;
			margin:100px 550px;
		}
		.lightOff{
			background:url('image/star1.jpg') no-repeat;
			display:block;
			float:left;
			width:20px;
			height:20px;
			margin:2px;
		}
		.light{
			background:url("image/star2.jpg") no-repeat;
			display:block;
			float:left;
			width:20px;
			height:20px;
			margin:2px;
		}
		li{
			list-style-type:none;
		}
		.title{
			display:block;
			float:left;
		}
		.stars{
			display:block;
			float:left;
			margin-left:10px;
		}
		.level{
			color:#A1A1A1;
			margin-left:15px;
		}
		
	</style>

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/star.js"></script>
	<script type="text/javascript">
		$(function(){
			$("i").star();
		});
	</script>

	<body>

		<div class="starBox">
			<ul>
				<li>
					<input type="hidden" value="" />
					<span class="title">请打分</span>
					<span class="stars">
						<i class="lightOff"></i>
						<i class="lightOff"></i>
						<i class="lightOff"></i>
						<i class="lightOff"></i>
						<i class="lightOff"></i>
					</span>
					<span class="level">暂未评分</span>
				</li>
			</ul>
		</div>

	</body>

</html>

js插件代码

;(function($){
	$.fn.extend({
		star:function(){
			var degree = ['很差','差','一般','好','很好','未评分'];
			//放置鼠标
			$(this).on("mouseover",function(){
				var index=$(this).index();
				var list=$(this).parent().find('i');
				list.each(function(i){
					if(i<=index){
						list.eq(i).attr("class","light");
					}
				});
				
				$(this).parent().next().html(degree[index]);
			});
			
			//移开鼠标
			$(this).on("mouseout",function(){
				var scoreStr=$(this).parent().prevAll('input').val();
				var score=parseInt(scoreStr);
				var list=$(this).parent().find('i');
				//有过评分
				if(score>0){
					list.each(function(i){
						list.eq(i).attr("class","lightOff");
					});
					list.each(function(i){
						if(i<score){
							list.eq(i).attr("class","light");
						}
					});
					
					$(this).parent().next().html(degree[score-1]);
				}else{//还没有评分，回到初始值
					list.each(function(i){
						list.eq(i).attr("class","lightOff");
					});
					
					$(this).parent().next().html(degree[5]);
				}
			});
			
			//点击星星
			$(this).on("click",function(){
				//先全部关闭
				var list=$(this).parent().find("i");
				list.each(function(i){
					list.eq(i).attr("class","lightOff");
				});
				//再一次点亮
				var index=$(this).index();
				list.each(function(i){
					if(i<=index){
						list.eq(i).attr("class","light");
					}
				});
				//将分数放到隐藏域中
				var score=$(this).parent().prevAll("input");
				score.val(index+1);
			});
		}
	});
})(jQuery);

效果如图：