五角星評分案例 1. 滑鼠經過li的時候，當前的位置是實心五角星，前面的是實心。當前位置後面的是空心。註意此處不能完全用鏈式編程寫到底 2. 滑鼠離開，comment的所有孩子變為空心五角星。額外，找到current, 讓current和它的前面都是實心。 3. 點擊li的時候，當前的位置增加個cu ...
五角星評分案例
1. 滑鼠經過li的時候，當前的位置是實心五角星，前面的是實心。當前位置後面的是空心。註意此處不能完全用鏈式編程寫到底
2. 滑鼠離開，comment的所有孩子變為空心五角星。額外，找到current, 讓current和它的前面都是實心。
3. 點擊li的時候，當前的位置增加個current的class, 其餘位置移除current
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星評分案例</title> <style> * { padding: 0; margin: 0; } .comment { font-size: 40px; color: #ff16cf; } .comment li { float: left; } ul { list-style: none; } </style> <script src="jquery-1.12.4.js"></script> <script> $(function () { //1. 給li註冊滑鼠經過事件，讓自己和前面所有的兄弟都變成實心 var wjx_k = "☆"; var wjx_s = "★"; $(".comment > li").on("mouseenter", function () { $(this).text(wjx_s).prevAll().text(wjx_s); $(this).nextAll().text(wjx_k); }); //2. 給ul註冊滑鼠離開時間，讓所有的li都變成空心 $(".comment").on("mouseleave", function () { //2. 給ul註冊滑鼠離開時間，讓所有的li都變成空心 $(this).children().text(wjx_k); //再做一件事件，找到current，讓current和current前面的變成實心就行。 $("li.current").text(wjx_s).prevAll().text(wjx_s); }); //3. 給li註冊點擊事件 $(".comment>li").on("click", function () { $(this).addClass("current").siblings().removeClass("current"); }); }); </script> </head> <body> <ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> </html>
