JQuery之 星星評分（Part7）

1：參考xklsky《写了个jquery星星打分效果》編寫的一個星星評分:

2：站長素材星星評分參考二

說明：

1. 鼠标点击，该元素包括该元素之前的元素获得样式,并给隐藏域span赋值
2. 鼠标移入，样式随鼠标移动
3. 鼠标移出，样式移除但被鼠标点击的该元素和之前的元素样式不变
4. 每次触发事件，移除所有样式，并重新获得样式

css：

[code]  ul,
li {
padding: 0;
margin: 0;
}

ul {
width: 400px;
height: 200px;
display: flex;
justify-content: center;
align-items: center
}

li {
list-style: none;
float: left;
margin: 0 5px;
height: 42px;
width: 44px;
}

ul li {
background: url("img/star2.png") no-repeat;
background-position: 0 -42px;
background-size: 44px 84px;
}

ul li.on {
background: url("img/star2.png") no-repeat;
background-position: 0 0;
background-size: 44px 84px;
}

HTML：

[code]<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="num"></span>

jq：

[code] <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
$(function () {
$("ul li").on('mouseover', function () {
var index = $(this).index() + 1;
clearstart($(this));
$(this).attr('class',"on").prevAll('li').attr('class',"on")
});
$("ul li").on('mouseout', function () {
clearstart($(this));
var count = $(this).parent().siblings(".num").text();
$(this).parent().find('li').eq(count-1).attr('class',"on").prevAll('li').attr('class',"on")
});
$("ul li").on('click', function () {
var index = $(this).index() + 1;
clearstart($(this));
$(this).attr('class',"on").prevAll('li').attr('class',"on")
$(this).parent().siblings(".num").text(index);
});
})
function clearstart(obj) {
obj.parent().children('li').removeClass('on');
}

img 

結果為：