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 + "分");
            });
        })