jQuery Raty 源码改造，设置自己想要的值

本文主要是介绍jQuery Raty 源码改造，设置自己想要的值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

现在有个要求：

    先从后台获取我们要显示多少颗星星，再为每个星星设置一个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++) {varname  = 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) {varexecute = 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！！

这篇关于jQuery Raty 源码改造，设置自己想要的值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---