一个简单的case ：关于各类评价网站的上星星；
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 10 <style> 11 li { 12 list-style: none; 13 float: left; 14 font-size: 36px; 15 color: yellow; 16 cursor: pointer; 17 } 18 </style> 19 <script src="jquery-1.12.4.js"></script> 20 <script> 21 var stark = "☆"; 22 var stars = "★"; 23 //鼠标进入事件改变星星的颜色为实体，让当前的星星前面全为实体，后面为空心 24 $(function () { 25 $("li").on("mouseenter", function () { 26 $(this).text(stars).prevAll().text(stars); 27 $(this).nextAll().text(stark); 28 }); 29 30 //鼠标离开事件，让所有的星星为空心； 31 $("li").on("mouseleave", function () { 32 $("li").text(stark); 33 //让class 为current的 前面所有的星星为实体，后面的星星为空 34 $("li.current").text(stars).prevAll().text(stars); 35 }) 36 37 //注册点击事件，让当前点击的前面的星星全为实体； 38 $("li").on("click",function () { 39 $(this).addClass("current").siblings().removeClass("current"); 40 }) 41 42 43 44 45 46 }) 47 </script> 48 49 </head> 50 51 <body> 52 <div> 53 <ul> 54 <li>☆</li> 55 <li>☆</li> 56 <li>☆</li> 57 <li>☆</li> 58 <li>☆</li> 59 </ul> 60 </div> 61 </body> 62 63 </html>
仅供学习参考！自己平时学习的笔记。如有疑问和代码缺陷，欢迎评论！~~~~
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
