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>