您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jquery实现类似淘宝星星评分功能实例
作者：佚名 责任编辑：admin 更新时间：2022-06-22
html部分代码如下：
01 <body> 02 <div id="div"> 03 <ul> 04 <li>☆</li> 05 <li>☆</li> 06 <li>☆</li> 07 <li>☆</li> 08 <li>☆</li> 09 </ul> 10 </div> 11 <p id="p"></p> 12 <p id="score"></p> 13 </body>上述代码中：
id="p"显示即时分数
id="score"显示最终分数
javascript代码如下：
01 <script type="text/javascript"> 02 $(function () { 03 //为所有的li标签绑定mouseout和mouseover事件。bind({事件名：function(){},事件名：function(){}})的方法绑定多个事件 04 $("#div li").bind({ 05 mouseout:function () { 06 $(this).css("color", "black").html("☆").prevAll().css("color", "black").html("☆") 07 }, 08 mouseover: function () { 09 $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★") 10 } 11 }); 12 //=实时显示分数.【index】搜索匹配的元素，并返回相应元素的索引值，从0开始计数。 13 $("#div li").mouseover(function () { 14 $("#p").html(parseInt( $(this).index("#div li"))+1); 15 }); 16 //鼠标按下时，确定分数。额，就不更改了，大局已定。 17 $("#div li").mousedown(function () { 18 $("#score").html(("你选择的分数是" + (parseInt($(this).index("#div li")) + 1))); 19 $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★") 20 //全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除 21 $(this).unbind().prevAll().unbind().nextAll().unbind(); 22 }); 23 }) 24 </script>- 上一个程序编程： jquery根据锚点offset值实现动画切换
- 下一个程序编程： 如何用JavaScript定义一个类
