PHP+jQuery实现文章星级评分的第一次初稿

文章作者:中山市飞娥软件工作室「Feiesoft.com」  浏览次数:3049 次  更新日期:2013-10-16

文章星级评分是一个与网友互动的常见应用,文章一定数量的评分可以反映出文章内容对网友的有用及受欢迎情况,小编在网络上查询了下些案例,大多注重界面的设计,并没有实用可用的代码;因此在此写了篇《PHP+jQuery实现文章星级评分的第一次初稿》以达抛砖引玉之效。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.starscore * {
 float:left;height:30px;line-height:30px;width:30px;
 background-color:#ccc;
 padding:0;margin:1px;
 list-style:none;
 text-align:center;
 font-size:12px
}
</style>
</head>
<body>
<div>星级评分:<span id="starscore_msg">&nbsp;</span>
 <ul class="starscore"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><span id="starscore">0</span></ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

$(function(){

 $(".starscore li").bind({

  //鼠标进入事件,选择分数

  mouseenter: function(){

      $(".starscore li").css("background","#f60");

      $(this).css("background","#f60");

      $("#starscore").html($(this).index() + 1);

      $(this).nextAll().css("background","#ccc");

     },

  //鼠标单击事件,提交评分

  click:  function(){

      //

      $("#starscore_msg").html("感谢评分!").css("color","green");

      //评分提交后,就不能再次选择分数。

      $(".starscore li").unbind("mouseenter");

      //提交分数到后台数据库

      $.ajax({

       url:"/doc_star_score_save.php",

       data:"?doc_id=n&score=" + Number($("#starscore").html())

      });

     }

 });

});

</script>
</body>
</html>