jq实现星星评价

最新推荐文章于 2021-05-24 11:20:58 发布

林中明月间。

最新推荐文章于 2021-05-24 11:20:58 发布

阅读量1.3k

点赞数 2

分类专栏： JQuery Html+Css+Js

JQuery 同时被 2 个专栏收录

60 篇文章

订阅专栏

Html+Css+Js

51 篇文章

订阅专栏

本文介绍了一款基于HTML5、CSS和JavaScript实现的星星评价插件，通过灵活的样式和交互设计，用户可以轻松地在网页上实现产品或服务的星级评价功能。插件支持动态显示评价等级文字，如'非常差'到'非常好'，并能够响应用户的点击事件，自动调整已选星星的数量。

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

参考：

https://www.jianshu.com/p/02969846f1ed

https://www.cnblogs.com/baixuemin/p/6492257.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/wyrem.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.9.1.min.js"></script>
    <title>填写评价</title>
</head>
<style>
/* 星星评价打分 */
.star_box{
    margin: 0.1rem;
    background: #fff;
    height: 2rem;
    border-radius: 0.1rem;
}
.star_box p{
    font-size: 0.2rem;
    color: #231815;
    text-align: center;
    font-weight: bold;
    line-height: 1rem;
}
.appr_start{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.appr_start span{
    width: 0.6rem;
    height: 0.54rem;
    background: url(../images/icon_star.png) no-repeat center;
    background-size: 100% 100%;
    margin-right: 0.24rem;
}
.appr_start span.on{
    background: url(../images/icon_astar.png) no-repeat center;
    background-size: 100% 100%;
}
.appr_start em{
    font-size: 0.24rem;
    color: #666666;
}
</style>
<body style="background: #eeefef">
    <div class="star_box">
        <p>星级评价</p>
        <div class="appr_start">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <em></em>
        </div>
    </div>

    <script type="text/javascript">
    //星星评分
    $(function() {       // 小星星     
        $(".appr_start span").click(function() {        
            $(this).addClass("on");        
            $(this).prevAll().addClass("on");        
            $(this).nextAll().removeClass("on");        
            var sta_index = $(this).index();        
            if(sta_index == 0) {          
                $(this).siblings("em").html('非常差');        
            } else if(sta_index == 1) {          
                $(this).siblings("em").html('差');        
            } else if(sta_index == 2) {          
                $(this).siblings("em").html('一般');        
            } else if(sta_index == 3) {          
                $(this).siblings("em").html('好');        
            } else if(sta_index == 4) {          
                $(this).siblings("em").html('非常好');        
            }      
        })    
    })

</script>

</body>
</html>