【js】jQuery实现五星评分

最新推荐文章于 2024-07-20 09:19:45 发布

evan_qb

最新推荐文章于 2024-07-20 09:19:45 发布

阅读量2.3k

点赞数 1

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/Evan_QB/article/details/79180101

版权

前端专栏收录该内容

76 篇文章 1 订阅

订阅专栏

html代码:

<body>
    <div class="box">
        <ul class="comment">
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
        </ul>
    </div>
</body>

css样式

*{
    margin:0;
    padding:0;
}

.box{
    margin: 20px auto;
    height: 50px;
    width: 300px;
}
.box .comment{
    font-size: 30px;
    color: orange;
}

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

ul{
    list-style: none;
}

js代码:

<script src="jquery-1.11.1.js"></script>
<script>
    $(function(){
        var wjx_none = '☆'; // 空心五角星
        var wjx_sel = '★'; // 实心五角星

        //鼠标移进变实星
        $(".comment li").on("mouseover",function(){
            $(this).text(wjx_sel).prevAll("li").
            text(wjx_sel).end().nextAll().text(wjx_none);
        });

        //鼠标移出变空星
        $(".comment li").on("mouseout",function(){
           if($("li.current").length === 0){
                $(".comment li").text(wjx_none);
           }else{
               $("li .current").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
           }
        });

        //鼠标点击保持当前状态
        $(".comment li").on("click",function(){
            $(this).attr("class","current").siblings().removeClass("current");
        });


    });
</script>

效果: