个人中心
gpt4 book ai didi

如何基于jQuery实现五角星评分

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章如何基于jQuery实现五角星评分由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1. 鼠标经过li的时候，当前的位置是实心五角星，前面的是实心。当前位置后面的是空心。注意此处不能完全用链式编程写到底 。

2. 鼠标离开，comment的所有孩子变为空心五角星。额外，找到current, 让current和它的前面都是实心.

3. 点击li的时候，当前的位置增加个current的class, 其余位置移除current 。

如何基于jQuery实现五角星评分

代码如下 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang= "en" >
 
<head>
  <meta charset= "UTF-8" >
  <title>五角星评分案例</title>
  <style>
   * {
    padding: 0;
    margin: 0;
   }
 
   .comment {
    font-size: 40px;
    color: #ff16cf;
   }
 
   .comment li {
    float: left;
   }
 
   ul {
    list-style: none;
   }
  </style>
  <script src= "jquery-1.12.4.js" ></script>
  <script>
   $( function () {
 
    //1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
    var wjx_k = "☆" ;
    var wjx_s = "★" ;
    $( ".comment > li" ).on( "mouseenter" , function () {
     $( this ).text(wjx_s).prevAll().text(wjx_s);
     $( this ).nextAll().text(wjx_k);
    });
 
    //2. 给ul注册鼠标离开时间，让所有的li都变成空心
 
    $( ".comment" ).on( "mouseleave" , function () {
     //2. 给ul注册鼠标离开时间，让所有的li都变成空心
     $( this ).children().text(wjx_k);
     //再做一件事件，找到current，让current和current前面的变成实心就行。
     $( "li.current" ).text(wjx_s).prevAll().text(wjx_s);
    });
 
 
    //3. 给li注册点击事件
    $( ".comment>li" ).on( "click" , function () {
     $( this ).addClass( "current" ).siblings().removeClass( "current" );
    });
 
   });
  </script>
 
 
</head>
 
<body>
  <ul class= "comment" >
   <li>☆</li>
   <li>☆</li>
   <li>☆</li>
   <li>☆</li>
   <li>☆</li>
  </ul>
</body>
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://www.cnblogs.com/colorchild/p/13461534.html 。

最后此篇关于如何基于jQuery实现五角星评分的文章就讲到这里了,如果你想了解更多关于如何基于jQuery实现五角星评分的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： 手把手教你实现 Promise的使用方法
文章推荐： PHP迭代与递归实现无限级分类
文章推荐： yii2中LinkPager增加总页数和总记录数的实例
文章推荐： 在vscode 中设置 vue模板内容的方法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com