信鸽网

jquery实现类似淘宝星星评分功能实例

  作者：bea

本文实例讲述了jquery实现类似淘宝星星评分功能的方法，分享给大家供大家参考之用。具体方法如下： html部分代码如下： <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>

本文实例讲述了jquery实现类似淘宝星星评分功能的方法，分享给大家供大家参考之用。具体方法如下：


html部分代码如下：




<body>

  <div id="div">

    <ul>

      <li>☆</li>

      <li>☆</li>

      <li>☆</li>

      <li>☆</li>

      <li>☆</li>

    </ul>

  </div>

  <p id="p"></p>

  <p id="score"></p>

</body>


上述代码中：


id="p"显示即时分数


id="score"显示最终分数


javascript代码如下：




<script type="text/javascript">

$(function () {

  //为所有的li标签绑定mouseout和mouseover事件。bind({事件名：function(){},事件名：function(){}})的方法绑定多个事件

  $("#div li").bind({

 mouseout:function () {

   $(this).css("color", "black").html("☆").prevAll().css("color", "black").html("☆")

 },

 mouseover: function () {

   $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")

 }

  });

  //=实时显示分数.【index】搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

   $("#div li").mouseover(function () {

   $("#p").html(parseInt( $(this).index("#div li"))+1);

 });

  //鼠标按下时，确定分数。额，就不更改了，大局已定。

 $("#div li").mousedown(function () {

   $("#score").html(("你选择的分数是" + (parseInt($(this).index("#div li")) + 1)));

   $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")

   //全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除

   $(this).unbind().prevAll().unbind().nextAll().unbind();

 });

  })

</script>


希望本文所述对大家的jQuery WEB程序设计有所帮助




有用  |  无用

猜你喜欢

您可能感兴趣的文章: