html
<p>五星好评:
<span data-number="1">☆</span>
<span data-number="2">☆</span>
<span data-number="3">☆</span>
<span data-number="4">☆</span>
<span data-number="5">☆</span>
<i class="sum"></i>
</p>
jquery
$("span").click(function(){
$("span").removeClass("yellow");
var num=$(this).index();
console.log(num)
for(var i=0;i<=num;i++){
$("span").eq(i).addClass("yellow");
var a =$("span").eq(i).attr('data-number');
$('.sum').text(a+"分")
}
})
或者:
var lis=$("span").length;
console.log(lis)
for(var i=0;i<lis;i++){
$("span").eq(i).click(function(){
$("span").removeClass("yellow");//清除之前的样式
var num=$(this).index();
console.log(num)
for(var j=0;j<=num;j++){
$("span").eq(j).addClass("yellow");
}
var a =$(this).attr('data-number');
$('.sum').text(a+"分")
})
}