案例分析：
1，鼠标经过每个 li , 当前 li 以及前面当前这个 li 前面所有的 li 都变成实心
2，鼠标离开 ul ,所有的 li 都变成空心
3，如果点击了某个 li , 鼠标离开 ul 的时候，点击的这个 li 以及这个 li 之间的所有 li 都变成实心
4，因此 ， 当点击了某个 li ，要记录这个li , 给这个 li 一个标记 clsss类标记 "current"等。
jQuery代码：
var wjx-k="☆"; var wjx-s="★"; $(" ul > li").on("mouseenter" , function(){ $(this).text(wjx-s).prevAll().text(wjx-s); $(this).nextAll().text(wjx-k); }) $("ul").on("mouseleave" , function(){ $(this).children().text(wjx-k); $("ul > li.current").text(wjx-s).prevAll.text(wjx-s); }) $("ul > li").on("click" , function(){ $(this).addClass("current").siblings().removeClass("current"); })
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> ul { font-size: 40px; color: #ff16cf; } ul 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 = "★"; $("ul >li").on("mouseenter", function () { $(this).text(wjx_s).prevAll().text(wjx_s); $(this).nextAll().text(wjx_k); }); //2. 给ul注册鼠标离开时间，让所有的li都变成空心 $("ul").on("mouseleave", function () { $(this).children().text(wjx_k); //再做一件事件，找到current，让current和current前面的变成实心就行。 $("li.current").text(wjx_s).prevAll().text(wjx_s); }); //3. 给li注册点击事件 $(" ul >li").on("click", function () { $(this).addClass("current").siblings().removeClass("current"); }); }); </script> </head> <body> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> </html>