jQuery----五星好评实现
程序员文章站
2022-05-17 14:50:11
在美团、淘宝、京东等网页上，有许多商品、服务评价页面，五星好评功能很常见，本文利用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>
上一篇： 原生js自动轮播图
下一篇： jQuery替换字符串(实例代码)