首頁 > web前端 > js教程 > 使用jQuery實現星級評分代碼分享_jquery

使用jQuery實現星級評分代碼分享_jquery

WBOY
發布: 2016-05-16 16:28:06
原創
1428 人瀏覽過

前面有一篇原生js實作星級評分 。可能涵蓋範圍不是很廣,現在給出一個jquery實現的星級評分。

複製程式碼 程式碼如下:

 
jQuery星級評論評分 
 
 

複製程式碼 程式碼如下:

 

複製程式碼 程式碼如下:

                   ''; 
        $(_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:函數(parentCls){ 
        var self = 這個,
            _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[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 = 索引 1; 
                                 
                !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden'); 
                var html = ''  
                                索引  
                           '分'_cache.aMsg[index].split('|')[1];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[i].className = i             } 
        } 
    } 
 }; 

使用方法超簡單,這裡就不多廢話了,小夥伴們拿走自由發揮吧。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板