在美团、淘宝、京东等网页上,有许多商品、服务评价页面,五星好评功能很常见,本文利用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>
图片、jQuery资料下载地址:QQ群694406023(百度云资料太浪费内存了~~~~~~~~) 备注:一般代码中总会引入JQuery包,复制代码过程中请注意。用到的外部包文件群文件中都已上传。