星星评分的实现和改进

1，首先下载星星的图片

下载logo的网址 https://icomoon.io/

2，使用雪碧图

雪碧图合成地址 https://www.toptal.com/developers/css/sprite-generator

.bg-star_o { width: 26px; height: 28px; background: url('css_sprites.png') -10px -10px; }

.bg-star { width: 26px; height: 28px; background: url('css_sprites.png') -10px -58px; }

.bg-star_half_empty { width: 26px; height: 28px; background: url('css_sprites.png') -10px -106px; }

最后生成的雪碧图：

3，简单代码（没有使用事件委托的js实现）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>stars</title>
	<style>
		body,ul,li{
			margin:0;
			padding:0;
		}

		li{
			list-style: none;
		}
		.rating{
			height:28px;
			width:130px;
			margin:100px auto;
		}

		.rating-item{
			float:left;
			height:28px;
			width:26px;
			background: url('starSprite.png') -10px -10px no-repeat;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<ul id="rating" class="rating">
		<li class="rating-item" title="bad"></li>
		<li class="rating-item" title="notgood"></li>
		<li class="rating-item" title="soso"></li>
		<li class="rating-item" title="good"></li>
		<li class="rating-item" title="excellent"></li>
	</ul>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
	<script>
		var num =2;
		var $rating = $('#rating');
		var $item = $rating.find('.rating-item');

		var lightOn = function(num){
			$item.each(function(index){
				if(index < num){
					$(this).css('background-position','-10px -58px');
				}else{
					$(this).css('background-position','-10px -10px');
				}
			})
		}

		lightOn(num);
		//给每个星星都绑定事件，造成浪费，应该用事件委托
		$item.mouseover(function(){
			lightOn($(this).index()+1);
		}).click(function(){
			num = $(this).index()+1;
		});

		$rating.mouseout(function(){
			lightOn(num);
		})；

		
	</script>
</body>
</html>

4，改进代码

使用事件委托，使用一个自执行函数可以避免全局变量的污染,避免全局变量污染
编写成一个可复用方法，同时编写为Jquery插件，两种调用方法

//使用一个自执行函数可以避免全局变量的污染
//可复用方法
var rating = (function(){
	var lightOn = function($item,num){
		$item.each(function(index){
			if(index < num){
				$(this).css('background-position','-10px -58px');
			}else{
				$(this).css('background-position','-10px -10px');
			}
		})
	}
	var init = function(el,num){
		var $rating = $(el);
		var $item = $rating.find('.rating-item');				

		lightOn($item,num);
		//给每个星星都绑定事件，造成浪费，应该用事件委托
		$rating.mouseover(function(e){
			var ev = e || window.event;
　　　　		var target = ev.target || ev.srcElement;
			lightOn($item,parseInt(target.id)+1);
		}).click(function(e){
			var ev = e || window.event;
　　　　		var target = ev.target || ev.srcElement;
			num = parseInt(target.id)+1;			
		}).mouseout(function(){
			lightOn($item,num);
		});
	}

	//Jquery插件编写
	$.fn.extend({
		rating:function(num){
			//为了连缀需要返回this，遍历返回
			return this.each(function(){
				init(this,num)
			})
		}
	})

	return {
		init:init
	}			
	
})();

rating.init('#rating',2);

$('#rating').rating(4);

扫描二维码关注公众号，回复： 4184255 查看本文章