萬盛學電腦網 >> 腳本專題 >> javascript >> jquery實現類似淘寶星星評分功能實例
jquery實現類似淘寶星星評分功能實例
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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved