Gunakan jQuery untuk berkongsi kod rating bintang

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.

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Gunakan jQuery untuk berkongsi kod rating bintang_jquery