星星评价，适用于移动端

最新推荐文章于 2022-07-06 09:24:02 发布

omyrobin2

最新推荐文章于 2022-07-06 09:24:02 发布

阅读量2.1k

点赞数

分类专栏：插件

本文链接：https://blog.csdn.net/gh1205/article/details/51851281

版权

插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

星星评价

自己写的 （星星评价） 插件
星星评价，满意度为 很满意、满意、一般、不满意、很差
初始化为  很满意
![图片](https://img-blog.csdn.net/20160707145807628)

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>星星评价</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
        .xingbox{clear: both;padding-top:10px;text-align: center;color: #999999;padding-top: 5px;width: 100%;}
        .xingbox .starscore{
            margin: 0 auto 0 15%;
            width: 100%;
        }
        .xingbox .starscore i {
                width: 10%;
                height:30px;
                display: block;
                background: url(score-nor_icon.png) no-repeat; 
                float: left;
                background-size:30px;
                display: inline;
                margin:0px 2% 0 2%;
            }
        .xingbox .starscore i.onred {
            background: url(score-pre_icon.png) no-repeat; 
            background-size:30px;
        }
        .text{clear: both;padding-top: 15px;}
    </style>
</head>
<body>
    <div class="xingbox">
        <div class="starscore sstar" data-score="5">
            <i class="onred" data-index="4" ></i>
            <i data-index="1"></i>
            <i data-index="2"></i>
            <i data-index="3"></i>
            <i data-index="4"></i>
        </div>
        <p class="text"></p>
    </div>
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript">
        $(function(){$(".starscore").BindStars();})
    </script>
</body>
</html>

index.js

(function ($) {    
    $.fn.BindStars = function () {
        var starElement = $(this),
            txt = $('.text');
        starElement.children("i").addClass('onred');
        txt.text('很满意');
        starElement.children("i").on('click',function () {
            var curIndex = starElement.find("i").index(this);
            if(curIndex==0){
                  txt.text('很差');
            }else if(curIndex == 1){
                txt.text('不满意');
            }else if(curIndex == 2){
                txt.text('一般');
            }else if(curIndex == 3){
                txt.text('满意');
            }else if(curIndex == 4){
                txt.text('很满意');
            }
            starElement.find("i").each(function (index) {
                if (index <= curIndex) {
                    $(this).addClass("onred");
                }
                else {
                    $(this).removeClass("onred");
                }
            }); 
            starElement.attr("data-score", curIndex + 1);
        });
    };
    $.fn.SetStars = function (score) {
        var scoreStr = "";
        for (var i = 0; i < 5; i++) {
            if (i < score) {
                scoreStr += "<i class='onred'></i>";
            } else {
                scoreStr += "<i></i>";
            }
        } 
        $(this).html(scoreStr); 
    };
})(window.jQuery);