<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> li{ list-style: none; float: left; font-size: 36px; color: blue; cursor: pointer; } </style> <script src="js/jquery-1.11.0.min.js"></script> <script> var stark = "☆"; var stars = "★" $(function(){ //未点击之前 li标签本身及前面全部添加样式 $("li").on("mouseenter", function () { $(this).text(stars).prevAll().text(stars); $(this).nextAll().text(stark); }); //鼠标离开事件，让所有的星星为空心； $("li").on("mouseleave", function () { $("li").text(stark); //让class 为current的 前面所有的星星为实体，后面的星星为空 $("li.current").text(stars).prevAll().text(stars); }) //注册点击事件，让当前点击的前面的星星全为实体； $("li").on("click",function () { $(this).addClass("current").siblings().removeClass("current"); }) }) </script> </head> <body> <div> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div> </body> </html>
Jquery制作小星星(常用于评价)
猜你喜欢
转载自www.cnblogs.com/iWaitYou/p/9552309.html
今日推荐
周排行