Jquery制作小星星(常用于评价)-CFANZ编程社区

Jquery制作小星星(常用于评价)
<!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>
0 条评论