Gunakan jQuery untuk berkongsi kod rating bintang_jquery

Terdapat artikel sebelumnya Native js melaksanakan penarafan bintang . Liputan mungkin tidak begitu luas, tetapi sekarang saya akan memberikan penarafan bintang pelaksanaan jquery.

Salin kod Kod adalah seperti berikut: Penilaian Ulasan Bintang jQuery 1 2 3 4 5

Salin kod Kod adalah seperti berikut:

*{margin:0; padding:0; font-size:13px;} ul,li{list-style:none;} .bintang {kedudukan:relatif;lebar:600px;tinggi:24px; jidar:20px auto 0;} .span bintang {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 {warna: #FF6600;paparan: blok;gaya fon: biasa;} .star strong {color:#ff6600;padding-left:10px;} .tersembunyi{display:none;}

Salin kod

Kod adalah seperti berikut:

http://s.thsi.cn/js/jquery-1.7.2.min.js"> > 🎜> $(function(){ skor var = Skor baharu({ panggil balik: function(cfg) { console.log(cfg.starAmount); } }); }); %0A %0A %0A Salin%20kod %20Kod%20adalah%20seperti%20berikut: /** * 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($(' ')); var parentCls = $(item).closest('.parentCls'); self._bindEnv(parentCls); _config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback(); }); }, _bindEnv: function(parentCls){ var self = ini, _config = self.config, _cache = diri.cache; $(_config.selector ' li',parentCls).setiap(fungsi(indeks,item){ // 鼠标移上 $(item).mouseover(fungsi(e){ var offsetLeft = $('ul',parentCls)[0].offsetLeft; ismax(indeks 1); $('p',parentCls).hasClass('tersembunyi') && $('p',parentCls).removeClass('tersembunyi'); $('p',parentCls).css({'left':index*$(this).width() 12 'px'}); var html = ' ' ' ' indeks ' 分 ' _cache.aMsg[index].split('|')[0] '' ' ' _cache.aMsg[index].split('|')[1]; $('p',parentCls).html(html); }); // 鼠标移出 $(item).mouseout(function(){ ismax(); !$('p',parentCls).hasClass('tersembunyi') && $('p',parentCls).addClass('tersembunyi'); }); // 鼠标点击 $(item).klik(fungsi(e){ var index = $(_config.selector ' li',parentCls).index($(this)); _cache.iStar = indeks 1; !$('p',parentCls).hasClass('tersembunyi') && $('p',parentCls).addClass('tersembunyi'); var html = ' ' indeks ‘Split ’ _cache.aMsg[index].split('|')[1]; $('.desc',parentCls).html(html _config.callback && $.isFunction(_config.callback) && _config.callback({starAmount:_cache.iStar}); }); });

fungsi ismax(iArg) { _cache.iScore = iArg || var lis = $(_config.selector ' li',parentCls untuk(var i = 0; i lis[i].Nama kelas = i };

Kaedah penggunaannya sangat mudah, jadi tidak akan ada banyak perkara karut di sini Kawan, ambil sahaja dan gunakannya dengan bebas.