五角星案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星評分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: #ff3100;
        }

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

        ul {
            list-style: none;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            var wjx_none = '☆'; // 空心五角星
            var wjx_sel = '★'; // 實心五角星

            //需求1：鼠標放上去當前的li和之前所有的li內(nèi)容全部變?yōu)閷嵭奈褰切牵崎_變?yōu)榭招摹?            $(".comment li").on("mouseenter", function () {
                //當前五角星，和之前的所有五角星，全部是實心的，其他的為空心
//                $(this).text(wjx_sel).prevAll("li").text(wjx_sel);
//                $(this).nextAll("li").text(wjx_none);
                $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
            });

            $(".comment li").on("mouseleave", function () {
                //bug：如果沒有點擊過li，那么會出現(xiàn)無法清除的現(xiàn)象，處理辦法就是先判斷，看看是否有current類
                if($("li.current").length === 0){
                    $(".comment li").text(wjx_none);
                }else{
                    //當鼠標移開的時候，誰有current類名，那么當前和之前所有的li前部是實心五角星，后面的所有l(wèi)i都是空心
                    $("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
                }
            });


            //需求2：鼠標點擊那個li，當你前l(fā)i和之前所有的li都變成實心五角星，其他變?yōu)榭招摹?            $(".comment li").on("click", function () {
                //點擊哪個li給他加一個類名。清空其他所有的li的類名
                $(this).attr("class","current").siblings("li").removeAttr("class");
            });


        });
    </script>
</head>

<body>

    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容