1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>五角星评分案例</title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 12 .comment { 13 font-size: 40px; 14 color: #ff3100; 15 } 16 17 .comment li { 18 float: left; 19 cursor: pointer; 20 } 21 22 ul { 23 list-style: none; 24 } 25 </style> 26 <script src="jquery-1.11.1.js"></script> 27 <script> 28 $(function () { 29 var wjx_none = '☆'; // 空心五角星 30 var wjx_sel = '★'; // 实心五角星 31 32 $(".comment li").on("mouseenter", function () { 33 //需求1:鼠标移动到哪里，让当前星星和之前的变为实心五角星，之后的保持空心 34 //$(this).text(wjx_sel).prevAll("li").text(wjx_sel); 35 //$(this).nextAll("li").text(wjx_none); 36 //代码合二为一，end()方法 37 $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none); 38 }); 39 $(".comment li").on("click", function () { 40 //鼠标点击，给当前星星添加一个markStar类名进行记录，并且清除兄弟元素的类名 41 $(this).attr("class","markStar").siblings("li").removeAttr("class"); 42 }) 43 $(".comment li").on("mouseleave", function () { 44 //需求2:鼠标离开后，根据带有markStar类名的星星，进行当前和之前实心，之后空心 45 //bug:如果没有进行点击，就无法记录带有markstar类名的星星，解决方法：进行判断 46 if($("li.markStar").length === 0){ 47 $(".comment li").text(wjx_none); 48 }else{ 49 $("li.markStar").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none); 50 } 51 }) 52 53 }); 54 </script> 55 </head> 56 57 <body> 58 59 <ul class="comment"> 60 <li>☆</li> 61 <li>☆</li> 62 <li>☆</li> 63 <li>☆</li> 64 <li>☆</li> 65 </ul> 66 67 </body> 68 </html>