简单的评价星星

<%-- 鼠标点选，变换评分星的样式 --%>
function mouseIn(names,index,num){
　　backimg(names);
　　for(var i=0; i<index; i++){
　　　　jQuery("#"+names+"_"+i).attr("class","integral-mark-star-0");
　　}
　　jQuery("#"+names).attr("value",num);
}

<%-- 所有的评分星样式还原 --%>
function backimg(names){
　　for(var i=0; i<5; i++){
　　　　jQuery("#"+names+"_"+i).attr("class","integral-mark-star-1");
　　}
}

<style>
　　.integral-mark-star-1{
　　　　background-image: url("${IMAGE_PATH }/integral/star-1.jpg");
　　　　cursor: pointer;
　　}

　　.integral-mark-star-0{
　　　　background-image: url("${IMAGE_PATH }/integral/star-0.jpg");
　　　　cursor: pointer;
　　}
</style>

<table border="0" cellspacing="0" cellpadding="0">
　　<input type="hidden" name="firstStar" id="firstStar">
　　<input type="hidden" name="secondStar" id="secondStar">
　　<input type="hidden" name="thirdStar" id="thirdStar">
　　<input type="hidden" name="fourthStar"  id="fourthStar">
　　<input type="hidden" name="fivethStar" id="fivethStar">
　　<!--注意必须与下面的命名一致-->

　　<tr>
　　　　<td height="26">
　　　　　　<font size="2">物流评价：</font>
　　　　　　<input type="hidden" name="content" id="content"/>
　　　　</td>
　　　　<td class="integral-mark-star-1" width="28" height="26" id="firstStar_0" onclick="mouseIn('firstStar',1,1)" >
　　　　　　&nbsp;
　　　　</td>
　　　　<td class="integral-mark-star-1" width="28" height="26" id="secondStar_1" onclick="mouseIn('secondStar',2,2" >
　　　　　　&nbsp;
　　　　</td>
　　　　<td class="integral-mark-star-1" width="28" height="26" id="thirdStar_2"onclick="mouseIn('thirdStar',3,3" >
　　　　　　&nbsp;
　　　　</td>
　　　　<td class="integral-mark-star-1" width="28" height="26" id="fourthStar_3"onclick="mouseIn('fourthStar',4,4" >
　　　　　　&nbsp;
　　　　</td>
　　　　<td class="integral-mark-star-1" width="28" height="26" id="fivethStar_4"onclick="mouseIn('fivethStar',5,5" >
　　　　　　&nbsp;
　　　　</td>
</tr>

</table>
</td>
</tr>
</table>





结果是这样的：

 

转载于:https://www.cnblogs.com/susuhyc/p/5670393.html