码迷,mamicode.com
首页 > 其他好文 > 详细

简单的评价星星

时间:2016-07-14 15:09:26      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:

<%-- 鼠标点选,变换评分星的样式 --%>
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>





结果是这样的:技术分享

 

简单的评价星星

标签:

原文地址:http://www.cnblogs.com/susuhyc/p/5670393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!