在美團、淘寶、京東等網頁上，有許多商品、服務評價頁面，五星好評功能很常見，本文利用jQuery實現五星好評功能。 案例圖片： 案例需求： 如左圖所示，滑鼠進入某個五角星，該五角星包括之前的五角星全部變成黃色。 滑鼠離開後，變成黃色的恢複原狀 當滑鼠在某個五角星上點擊的時候，該五角星和其之前的五角星全 ...
在美團、淘寶、京東等網頁上，有許多商品、服務評價頁面，五星好評功能很常見，本文利用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>
