jQuery实现商品五星评价

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Titletitle>
 6     <style>
 7         ul{
 8             list-style:none;
 9         }
10 
11         li{
12             float:left;
13             font-size: 30px;
14             color: #f40;
15             cursor: pointer;
16         }
17 
18         .current{
19 
20         }
21 
22     style>
23 head>
24 <body>
25     <div class="wrap">
26         <ul>
27             <li>li>
28             <li>li>
29             <li>li>
30             <li>li>
31             <li>li>
32         ul>
33     div>
34 
35     <script src="https://code.jquery.com/jquery-3.4.1.min.js">script>
36 
37     <script>
38         $(function () {
39             $("li").on("mouseenter",function () {
40                 $(this).text("").prevAll().text("");
41                 $(this).nextAll().text("");
42             });
43 
44 
45             $("ul").on("mouseleave",function () {
46                 $(this).children().text("");
47                 $(".current").text("").prevAll().text("");
48                 $(".current").nextAll().text("");
49             });
50 
51             $("li").on("click",function () {
52                $(this).addClass("current").siblings().removeClass();
53             });
54 
55 
56 
57         });
58     script>
59 
60 
61 
62 
63 
64 
65 
66 body>
67 html>

 

转载于:https://www.cnblogs.com/programfield/p/11093573.html

你可能感兴趣的:(jQuery实现商品五星评价)