jQuery----五星好评实现

时间 2019-11-13

标签 jquery 五星好评实现栏目 JQuery 繁體版

原文原文链接

在美团、淘宝、京东等网页上，有许多商品、服务评价页面，五星好评功能很常见，本文利用jQuery实现五星好评功能。javascript

案例图片：css

案例需求：html

如左图所示，鼠标进入某个五角星，该五角星包括以前的五角星所有变成黄色。java

鼠标离开后，变成黄色的恢复原状jquery

当鼠标在某个五角星上点击的时候，该五角星和其以前的五角星所有变成黄色，鼠标离开后，颜色也不会恢复过来。this

实现思路：spa

①获取全部的li（五角星所有存在于li标签中），给$(this)注册mouseover、mouseout、click事件code

②mouseover事件中，将当前和前面的五角星变成黄色htm

$(this).text("★").prevAll("li").text("★")；blog

③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>