说明:主要是想总结一下jquery中的知识,这个例子中用到的主要是jquery中prevall()方法和nextAll()方法进行元素集合的遍历
jquery部分
$(function(){
$(".star01 li").addClass("xing_nomarl");
$(".star01 li").click(function(){
$(".star01 li").addClass("xing_nomarl");
$(this).addClass("xing_select");
$(this).prevAll().addClass("xing_select");
$(this).nextAll().removeClass("xing_select").addClass("xing_nomarl");
var star_number = $(this).prevAll().length+1;
//alert(star_number);
})
});
html部分
<ul class="star">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
css部分
.star{
display:inline-block;
padding-left:0;
margin-bottom: -5px;
}
.star li{
position:relative;
padding-left:10px;
float:left;
cursor:pointer;
}
.xing_nomarl{
width:18px;
height:18px;
display:block;
margin:0 5px;
background:url(xingxing_nomarl.png) no-repeat left center;
background-size:100%;
overflow:hidden;
}
.xing_select{
width:18px;
height:18px;
display:block;
margin:0 5px;
background:url(xingxing_select.png) no-repeat left center;
background-size:100%;
overflow:hidden;
}