【js】jQuery实现五星评分

最新推荐文章于 2021-12-11 17:34:31 发布

原创最新推荐文章于 2021-12-11 17:34:31 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端专栏收录该内容

76 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的星级评分组件。通过简单的鼠标操作，用户可以轻松选择评分等级，同时提供了美观的视觉反馈。代码示例详细展示了如何设置页面布局、样式以及交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

效果: