<html>
<head>
<title>星级标签</title>
<script type="text/javascript" src=" E:\JAVAscript\JQuery\jquery-3.3.1.js">
</script>
<style>
body,ul,li{
margin:0;
padding:0;
}
li{list-style-type:none;}
.rating{
width:160px;
height:32px;
margin:100px auto;
}
.rating-item{
float:left;
width:32px;
height:32px;
background:url(星星.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>
<script>
var rating = (function(){
//点亮星星
var lightOn = function($item,num){
$item.each(function(index){
if(index<num){
$(this).css("background-position",'0-32px');
}
else{
$(this).css("background-position","0 0");
}
});
};
var init = function(el,num){
var $rating = $(el);
var $item = $rating.find('.rating-item');
//初始化
lightOn($item,num);
//事件绑定
$rating.on('mouseover','.rating-item',function(){
lightOn($item,$(this).index()+1);
});
$rating.on('click','.rating-item',function(){
num= $(this).index()+1;
});
$rating.on('mouseout',function(){
lightOn($item,num);
});
}
//JQchajian
$.fn.extend({
rating:fuction(num){
return this.each(function(){
init(this,num);
});
}
});
return {
init:init;
}
})();
//rating.init('#rating',2);
$('#rating').rating(1);
</script>
</body>
</html>
把jq那段代码放进init中，否则自执行，return不出去，外面拿不到