<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> * { padding: 0; margin: 0; } .comment { font-size: 40px; color: #ff3100; } .comment li { float: left; cursor: pointer; } ul { list-style: none; } </style> <script src="jquery-1.11.1.js"></script> <script> $(function () { var wjx_none = ‘☆‘; // 空心五角星 var wjx_sel = ‘★‘; // 实心五角星 //鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。 $(".comment li").on("mouseenter", function () { //当前五角星，和之前的所有五角星，全部是实心的，其他的为空心 $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none); }); $(".comment li").on("mouseleave", function () { //bug：如果没有点击过li，那么会出现无法清除的现象，处理办法就是先判断，看看是否有current类 if($("li.current").length === 0){ $(".comment li").text(wjx_none); }else{ //当鼠标移开的时候，谁有current类名，那么当前和之前所有的li前部是实心五角星，后面的所有li都是空心 $("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none); } }); //鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。 $(".comment li").on("click", function () { //点击哪个li给他加一个类名。清空其他所有的li的类名 $(this).attr("class","current").siblings("li").removeAttr("class"); }); }); </script> </head> <body> <ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> </html>