星级评价的代码php,JavaScript_使用jQuery实现星级评分代码分享，前面有一篇原生js实现星级评 - phpStudy...

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

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

http://s.thsi.cn/js/jquery-1.7.2.min.js">

$(function(){

var score = new Score({

callback: 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($('

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

''+index+'分 '+_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 = index + 1;

!$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');

var html = '' +

index +

'分' +_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" : "";

}

}

}

};

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

Linux系统中的sudo命令使用讲解

如何备份Ubuntu系统以在电脑出问题时及时恢复

PHP中Socket连接及读写数据超时问题分析

Angularjs---项目搭建图文教程

JavaScript实现点击文本自动定位到下拉框选中操作

MySQL使用临时表加速查询的方法

ASP.NET创建三层架构图解详细教程

JavaScript实现复制文章自动添加版权

Html5 语法与规则简要概述

PHP实现货币换算的方法

Win7系统DNS服务器未响应问题的解决方法

jQuery插件实现表格隔行换色且感应鼠标高亮行变色

MySQL创建新用户、增加账户的2种方法及使用实例

win7自动更新失败无法进入系统的两种解决办法