'img/star165.png' :空星星图片
img/star-icon.png:实星星图片
<body>
<ul><li οnclick="lightstar(1)"><img id="star1" src='img/star165.png' /></li>
<li οnclick="lightstar(2)"><img id="star2" src='img/star165.png' /></li>
<li οnclick="lightstar(3)"><img id="star3" src='img/star165.png' /></li>
<li οnclick="lightstar(4)"><img id="star4" src='img/star165.png' /></li>
<li οnclick="lightstar(5)"><img id="star5" src='img/star165.png' /></li>
</ul>
<div id="starnumber" style="display: none;"></div>
</body>
<style type="text/css">
ul li{
list-style: none;
height: 20px;
width: 20px;
margin-left: 5px;
float: left;
}
img{
height: 20px;
width: 20px;
}
</style>
<script>
function lightstar(num){
//再点击之前将之前点击过的恢复到全为空的状态
for(var i=1;i<6;i++){
$("#star"+i).attr("src","img/star165.png");
}
var num=num;
//根据点击的数字 来依次点亮星星
for(var i=0;i<num;i++){
$("#star"+(i+1)).attr("src","img/star-icon.png");
}
//再将点亮的数字传回去 后期 便于取值
$("#starnumber").html(num);
}
</script>