jQuery 五角星評分

五角星打分??

我用的是搜狗輸入法上帶的特殊符號打出來的? 空五角星：☆? 實五角星：★

1.html

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

2.css

 * {
            margin: 0;
            padding: 0;
        }
        
        .comment {
            font-size: 45px;
            color: orange;
            list-style: none;
        }
        
        .comment li {
            float: left;
        }

3.jquery

 $(function() {
            $(".comment li").hover(function() {
                // over
                //prevAll()獲取當前元素之前的所有兄弟元素
                $(this).text("★").prevAll().text("★");
            }, function() {
                // out
                //如果被點中的話就不變成空的五角星 這里用的是三元一次運算符判斷的
                $(this).hasClass("clicked") ? (this).text("★").prevAll().text("★") : $(this).text("☆").prevAll().text("☆");
            }).click(function() {
                //addClass只是用來判斷是否被點中
                $(this).addClass("clicked").prevAll().addClass("clicked");
                //分數
                alert(($(this).prevAll().length + 1) * 20 + "分");
            });
        })

?