1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>五角星评论案例</title> 6 <style> 7 * { padding: 0; margin: 0; } 8 .comment { 9 font-size: 40px; 10 color: teal; 11 } 12 .comment li { 13 float: left; 14 } 15 ul { list-style: none;} 16 </style> 17 <script src="jquery-1.11.3.min.js"></script> 18 <script> 19 $(function(){ 20 var wjx_none = '☆', 21 wjx_sel = '★'; 22 $(".comment li").mouseenter(function(){ 23 //鼠标移入: 自己和前面的兄弟变实心，其余变空心 24 $(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none); 25 }).click(function(){ 26 //鼠标点击后，把自己添加clicked类，其余的清除clicked类 27 $(this).addClass('clicked').siblings().removeClass('clicked'); 28 }); 29 30 //当鼠标移开评分控件时，实心显示到被点击的五角星的上 31 $(".comment").mouseleave(function(){ 32 $(".comment li").text(wjx_none);//先给所有五角星都变空心 33 34 $(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none); 35 }); 36 37 $("li").click(function(){ 38 $(this).data("clicked", true); 39 40 // if($(this).data("clicked") === true ) { 41 42 // } 43 }); 44 }); 45 46 47 </script> 48 </head> 49 <body> 50 <ul class="comment"> 51 <li>☆</li> 52 <li ts="122" class="ss">☆</li> 53 <li>☆</li> 54 <li>☆</li> 55 <li>☆</li> 56 </ul> 57 </body> 58 </html>