现在有个要求:
先从后台获取我们要显示多少颗星星,再为每个星星设置一个value属性,为这个星星在数据库中的id.
1.找到Raty 定义数据结构的地方,并且加入自己的变量:
$.fn.raty.defaults = {
cancel : false,
cancelClass : 'raty-cancel',
cancelHint : 'Cancel this rating!',
cancelOff : 'cancel-off.png',
cancelOn : 'cancel-on.png',
cancelPlace : 'left',
click : undefined,
half : false,
halfShow : true,
hints : ['bad', 'poor', 'regular', 'good', 'gorgeous'],
iconRange : undefined,
mouseout : undefined,
mouseover : undefined,
noRatedMsg : 'Not rated yet!',
number : 5,
numberMax : 20,
path : undefined,
precision : false,
readOnly : false,
round : { down: 0.25, full: 0.6, up: 0.76 },
score : undefined,
scoreName : 'score',
single : false,
space : true,
starHalf : 'star-half.png',
starOff : 'star-off.png',
starOn : 'star-on.png',
starType : 'img',
target : undefined,
targetFormat : '{score}',
targetKeep : false,
targetScore : undefined,
targetText : '',
targetType : 'hint',
// custom 将后台的结果传递进来
resultList : undefined
};
2.在创建星星的时候,为它加入value属性
_createStars: function() {
for (var i = 1; i <= this.opt.number; i++) {
var
name = methods._nameForIndex.call(this, i),
attrs = { alt: i, src: this.opt.path + this.opt[name]};
// custom 增加一个value属性,方便传递参数
if(this.opt.resultList != undefined) {
attrs.value = this.opt.resultList[i - 1].id;
}
if (this.opt.starType !== 'img') {
attrs = { 'data-alt': i, 'class': attrs.src }; // TODO: use $.data.
}
attrs.title = methods._getHint.call(this, i);
$('<' + this.opt.starType + ' />', attrs).appendTo(this);
if (this.opt.space) {
this.self.append(i < this.opt.number ? ' ' : '');
}
}
this.stars = this.self.children(this.opt.starType);
},
3.在点击事件中用到这个变量:
Raty给了我们定义点击事件的方法,但是在那里获取到的是我们想要的对象的 父对象 很神奇!所以我决定在源码中传过来!
找到点击事件,并且将evt设置为我们想要的值(为什么?看注释):
_bindClick: function() {
var that = this;
that.stars.on('click.raty', function(evt) {
var
execute = true,
score = (that.opt.half || that.opt.precision) ? that.self.data('score') : (this.alt || $(this).data('alt'));
// custom 将 evt设为对应的id设为分数传递(事件名不太重要),因为我们需要的是表的ID,而我的ID是UUID,score会被数学函数处理,所以不能传,如果ID是数字则可以
evt = this.getAttribute("value");
if (that.opt.click) {
execute = that.opt.click.call(that, +score, evt);
}
if (execute || execute === undefined) {
if (that.opt.half && !that.opt.precision) {
score = methods._roundHalfScore.call(that, score);
}
methods._apply.call(that, score);
}
});
},
$("#star").raty({
path : basePath,
number : length,
resultList : data.result.list,
click : function (score, scoreId) { // scoreId 原本是evt 也就是我们想要的ID了~~~~
}
});
最后记得压缩JS!!