使用jQuery实现星级评分代码分享

网络编程 2024/9/24 佚名

2 0 1

金狮镖局 Design By www.egabc.com

前面有一篇原生js实现星级评分。可能覆盖面不是很广，现在给出一个jquery实现的星级评分。

复制代码代码如下:
<div class="star">
<span>jQuery星级评论打分</span>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
</div>

复制代码代码如下:
<style>
*{margin:0;padding:0;font-size:13px;}
ul,li{list-style:none;}
.star {position:relative;width:600px;height:24px; margin:20px auto 0;}
.star span {float:left;height:19px;line-height:19px;}
.star ul{margin:0 10px;}
.star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;}
.star li.on{background-position:0 -28px;}
.star p {padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;}
.star p em {color: #FF6600;display: block;font-style: normal;}
.star strong {color:#ff6600;padding-left:10px;}
.hidden{display:none;}
</style>

复制代码代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js"> <script type="text/javascript" src="/UploadFiles/2021-04-02/score.js"> </head>

<body>
<script type="text/javascript">
$(function(){
var score = new Score({
callback: function(cfg) {
console.log(cfg.starAmount);
}
});
});
</script>

复制代码代码如下:
/**
* JQ评分效果
*/
function Score(options) {
    this.config = {
        selector                  :   '.star',     // 评分容器
        renderCallback            :   null,        // 渲染页面后回调
        callback                  :   null         // 点击评分回调
    };

    this.cache = {
        aMsg : [
                "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
                "不满意|部分有破损，与卖家描述的不符，不满意",
                "一般|质量一般，没有卖家描述的那么好",
                "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
                "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
                ],
        iStar : 0,
        iScore : 0
    };

    this.init(options);
}

Score.prototype = {

    constructor: Score,

    init: function(options){
        this.config = $.extend(this.config,options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;

        self._renderHTML();
    },
    _renderHTML: function(){
        var self = this,
            _config = self.config;
        var html = '<span class="desc"></span>' +
                   '<p class="star-p hidden"></p>';
        $(_config.selector).each(function(index,item){
            $(item).append(html);
            $(item).wrap($('<div class="parentCls" style="position:relative"></div>'));
            var parentCls = $(item).closest('.parentCls');
            self._bindEnv(parentCls);
            _config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();
        });

    },
    _bindEnv: function(parentCls){
        var self = this,
            _config = self.config,
            _cache = self.cache;

        $(_config.selector + ' li',parentCls).each(function(index,item){

            // 鼠标移上
            $(item).mouseover(function(e){
                var offsetLeft = $('ul',parentCls)[0].offsetLeft;
                ismax(index + 1);

                $('p',parentCls).hasClass('hidden') && $('p',parentCls).removeClass('hidden');
                $('p',parentCls).css({'left':index*$(this).width() + 12 + 'px'});


                var html = '<em>' +
                              '<b>'+index+'</b>分 '+_cache.aMsg[index].split('|')[0]+'' +
                           '</em>' + _cache.aMsg[index].split('|')[1];
                $('p',parentCls).html(html);
            });

            // 鼠标移出
            $(item).mouseout(function(){
                ismax();
                !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');
            });

            // 鼠标点击
            $(item).click(function(e){
                var index = $(_config.selector + ' li',parentCls).index($(this));
                _cache.iStar = index + 1;

                !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');
                var html = '<strong>' +
                                index +
                           '分</strong>' +_cache.aMsg[index].split('|')[1];

                $('.desc',parentCls).html(html);
                _config.callback && $.isFunction(_config.callback) && _config.callback({starAmount:_cache.iStar});
            });

        });

        function ismax(iArg) {
            _cache.iScore = iArg || _cache.iStar;
            var lis = $(_config.selector + ' li',parentCls);

            for(var i = 0; i < lis.length; i++) {
                lis[i].className = i < _cache.iScore "on" : "";
            }
        }
    }
};

使用方法超级简单，这里就不多废话了，小伙伴们拿走自由发挥吧。

jQuery,星级评分,星星打分

标签：

jQuery,星级评分,星星打分

金狮镖局 Design By www.egabc.com

金狮镖局 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

金狮镖局 Design By www.egabc.com

评论“使用jQuery实现星级评分代码分享”

暂无使用jQuery实现星级评分代码分享的评论...

www.egabc.com 金狮镖局

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

使用jQuery实现星级评分代码分享

jQuery,星级评分,星星打分

基于javascript实现判断移动终端浏览器版本信息

Jquery弹出层插件ThickBox的使用方法

评论“使用jQuery实现星级评分代码分享”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接