jQuery五角星案例

文章目录

jQuery五角星案例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
       <title>五角星评分案例</title>
       <style>
         * {
           padding: 0;
           margin: 0;
         }
     
         .comment {
           font-size: 40px;
           color: pink;
         }
     
         .comment li {
           float: left;
         }
     
         ul {
           list-style: none; 
         }
       </style>
    <script type="text/javascript" src="jquery-3.2.1.min.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>