jQuery を使用して星評価コードを共有する_jquery

以前の記事 Native js は星評価を実装します があります。カバー範囲はそれほど広くないかもしれませんが、jquery 実装について星評価を付けます。

コードをコピーします コードは次のとおりです:

jQuery のスター レビュー評価

1

2

3

4

5

コードをコピーします コードは次のとおりです:

<スタイル>

*{マージン:0;パディング:0;フォントサイズ:13px;}
ul,li{リストスタイル:なし;}
.star {位置:相対;幅:600px;高さ:24px;マージン:20px 自動 0;}
.star スパン {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{背景位置:0 -28px;}
.star p {パディング:10px 10px 0;位置:絶対;トップ:20px;幅:159px;高さ:60px;z-index:100;}
.star p em {色: #FF6600;表示: ブロック;フォント スタイル: 通常;}
.starstrong {color:#ff6600;padding-left:10px;}
.hidden{表示:なし;}

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript"> $(関数(){
var スコア = 新しいスコア({
コールバック: function(cfg) {
console.log(cfg.starAmount); }
});
});







コードをコピー

コードは次のとおりです:

/**
 * 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 = '' +  
                   '

'; 
        $(_config.selector).each(function(index,item){ 
            $(item).append(html); 
            $(item).wrap($('

')); 
            varparentCls = $(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(インデックス 1); 
                 
                $('p',parentCls).hasClass('hidden') && $('p',parentCls).removeClass('hidden'); 
                $('p',parentCls).css({'left':index*$(this).width() 12 'px'}); 
                 
 
                var html = ''   
                              ''インデックス '分 ' _cache.aMsg[index].split('|')[0] ''
                           '' _cache.aMsg[インデックス].split('|')[1]; 
                $('p',parentCls).html(html); 
            }); 
 
            // ネズミ标移出
            $(item).mouseout(function(){
                ismax(); 
                !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden'); 
            }); 
             
            // 鼠标点击
            $(item).click(function(e){
                varindex = $(_config.selector ' li',parentCls).index($(this)); 
                _cache.iStar = インデックス 1; 
                                 
                !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden'); 
                var html = ''  
                                インデックス
「分割」 _cache.aMsg[index].split('|')[1];
$('.desc',parentCls).html(html); _config.callback && $.isFunction(_config.callback) && _config.callback({starAmount:_cache.iStar}); });                                                                       });

関数 ismax(iArg) {
_cache.iScore = iArg ||
var lis = $(_config.selector ' li',parentCls);                                                                       for(var i = 0; i < lis.length; i ) {
lis[i].className = i < _cache.iScore ? : "";                                                                                                                                                                                                                                           }
};



使用方法は非常に簡単なので、これを自由に使用してください。