在美团、淘宝、京东等网页上，有许多商品、服务评价页面，五星好评功能很常见，本文利用jQuery实现五星好评功能。
案例图片：
案例需求：
如左图所示，鼠标进入某个五角星，该五角星包括之前的五角星全部变成黄色。
鼠标离开后，变成黄色的恢复原状
当鼠标在某个五角星上点击的时候，该五角星和其之前的五角星全部变成黄色，鼠标离开后，颜色也不会恢复过来。
实现思路：
①获取所有的li（五角星全部存在于li标签中），给$(this)注册mouseover、mouseout、click事件
②mouseover事件中，将当前和前面的五角星变成黄色
$(this).text("★").prevAll("li").text("★")；
③click事件中，给当前点击的li五角星赋予index属性，方便在鼠标滑出的时候，能够保存点击时候五角星及之前五角星的状态，同时清除其他所有的li的index属性
$(this).attr("index",1).siblings("li").removeAttr();
④mouseout事件中，所有的li变为空白，但是属性index有值的li及其前面的li变为黄色
$(this).text("☆").siblings().text("☆")；
$( " li [indx=1] ").text("★").prevAll().text("★")；
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 ul { 8 list-style: none; 9 } 10 11 li { 12 float: left; 13 font-size: 39px; 14 color: yellow; 15 } 16 </style> 17 18 <script src="jquery-1.12.2.js"></script> 19 <script type="text/javascript"> 20 $(function(){ 21 //获取所有的li,注册鼠标移入事件 22 $("li").mouseover(function(){ 23 $(this).text("★").prevAll().text("★"); 24 }).mouseout(function(){ 25 $(this).text("☆").siblings().text("☆"); 26 $("li[index=1]").text("★").prevAll().text("★"); 27 }).click(function(){ 28 $(this).attr("index",1).siblings().removeAttr(); 29 }); 30 }); 31 </script> 32 </head> 33 <body> 34 <ul> 35 <li>☆</li> 36 <li>☆</li> 37 <li>☆</li> 38 <li>☆</li> 39 <li>☆</li> 40 </ul> 41 </body> 42 </html>