首页 > 代码库 > 五星评分

五星评分

2024-11-19 16:24:01   202人阅读

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background: #000000;
        }
        .comment {
            font-size: 40px;
            color: yellow;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
    </head>
    <body>
        <ul class="comment">
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
        </ul>
    </body>
    <script src=http://www.mamicode.com/"jquery-1.12.4.js"></script>
    <script type="text/javascript">
        
        /*
         *   当我鼠标移上到其中一个li身上的时候 应该让这个li以及它之前的li都变成实心的星星
         *   
         *   单击时候 记下来当前单击的这个li
         *  
         *     当我离开以后全部清空 到底清空不清空 取决于单击过没单击过
         *     当移出去的时候  可以先将所有的全部清空 然后保留当时单击的那个li 以及之前的
         * 
         * */
        var star1 = "☆";
        var star2 = "★";
        $("ul li").on({
            "mouseover":function(){
                //为了防止干扰 暴力清空所有
                $("ul li").text(star1);
                
                // 移到谁身上让谁显示实心星星以及它之前的li都显示实心
                $(this).text(star2).prevAll().text(star2);
            },
            "click":function(){
                // 让别人都去掉激活类 让当前的li 加上这个类   为了单独标记一下
                $(this).addClass("active").siblings().removeClass("active");
            },
            "mouseout":function(){
                // 先让所有都清空
                $("ul li").text(star1);
                // 让之前被标记过的那个li变成实心星星 以及让它之前的li也变成实心的星星
                $("ul li.active").text(star2).prevAll().text(star2);
            }
        })
        
    </script>
</html>

 

五星评分


联系
我们