您的位置：首页 > Web前端 > JQuery

【jquery】优化仿淘宝五星评价打分(附注释)

2015-09-08 21:55 776 查看
在前面的博文/article/8505249.html，我们已经把仿淘宝五星评价打分功能实现出来了，实现五星打分的思路基本就是前面博文提到的，但当有成千上万颗星星的时候，程序估计会长得很难看了。为了代码更加精简和有效率，我们来优化一下程序。

用到的星星素材可在前面的博客找到云盘链接：/article/8505248.html

话不多说，上码：

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style type="text/css">
img:hover{cursor: pointer;}
</style>
</head>
<body>
<div>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<span></span>
</div>
</body>
<script type="text/javascript">
$('img').each(function(index){
var star='img/star.png';	//普通灰色星星图片的存储路径
var starRed='img/star_red.png';		//红色星星图片存储路径
var prompt=['很差','比较差','一般','比较好','非常好'];	//评价提示语
this.id=index;		//遍历img元素，设置单独的id
$(this).on("mouseover click",function(){	//设置鼠标滑动和点击都会触发事件
$('img').attr('src',star);//当“回滚”、“改变主意”时，先复位所有图片为木有打星的图片颜色
$(this).attr('src',starRed);		//设置鼠标当前所在图片为打星颜色图
$(this).prevAll().attr('src',starRed);	//设置鼠标当前的前面星星图片为打星颜色图
$(this).siblings('span').text(prompt[this.id]);		//根据id的索引值作为数组的索引值
});
});
</script>
</html>


效果图：



这样程序看起来就不会那么臃肿了，试下吧O(∩_∩)O~

Author:致知

Sign:路漫漫其修远兮，吾将上下而求索。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航