function getNote(relativeX) {
var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100); //两个100是否可以去掉，表示选择的比例，如16 或 16.1
switch(opts.decimalLength) { //根据参数确定要输去比例需要的小数位，例如16.1 16.12 16.123
case 1 :
var note = Math.round(noteBrut*10)/10;
break;
case 2 :
var note = Math.round(noteBrut*100)/100;
break;
case 3 :
var note = Math.round(noteBrut*1000)/1000;
break;
default :
var note = Math.round(noteBrut*1)/1;
}
return note;
};
接着关注getNote函数，首先我们看以下relativeX是一个什么东西：
复制代码 代码如下:
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft;
上面两行代码是调用getNote函数前，定义relativeX变量用的，我们可以分析出relativeX的作用。这里的this是我们应用jRating()函数的某个div，首先获得其相对于浏览器的左边距，因为上面两行代码是出现在鼠标移动处理函数mouseenter中（稍后我们会看到），因此这里的e.pageX表示鼠标相对于浏览器的横向距离。因此，这里的relativeX表示的是鼠标相对于<div>左边界的横向距离。
我们再次关注getNote函数，由widthRatingContainer = starWidth*opts.length可以看出，widthRatingContainer是左右星星图片加起来的宽度。因此，var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100);可以把分母与分子上的两个100去掉，即(relativeX/widthRatingContainer)*opts.rateMax)，noteBrut变量最后存储的是鼠标选择的比例，如果rateMax设为20，则noteBrut的范围可以通过鼠标来确定（0—20）。
switch函数，是通过decimalLength参数（用来设定显示比例的小数位），最终确定（比例）显示的位数。读到这里，我们可以发现，getNote函数就是通过relativX来返回鼠标选择的比例，这个比例是什么，见下图用笔刷框起来的部分：
接下来，我们再关注一个函数：
复制代码 代码如下:
function getStarWidth(){
switch(opts.type) {
case 'small' :
starWidth = 12; // small.png小星星图片的宽度
starHeight = 10; // 高度
bgPath = opts.smallStarsPath; //图片相对地址
break;
default :
starWidth = 23; // 大星星的宽度，可以看到，这是默认值
starHeight = 20; // 高度
bgPath = opts.bigStarsPath; //星图片相对地址
}
};
这个是一个比较简单的用于初始化变量的函数，根据type属性，初始化三个变量，分别是starWidth、starHeight、bgPath，绿色的注释信息已能够说明一切，不再赘述！
each()中定义的函数看完了，接下来，我们还在each()函数中进行游荡，按照从上到下的顺序，先截取了几行代码如下：
复制代码 代码如下:
var opts = $.extend(defaults, op), //利用extend（）函数将默认参数与输入参数进行合并，最后存储在opts变量中。
newWidth = 0, //定义变量，该变量用于存储relativeX,但会根据step属性进行相应调整
starWidth = 0, //定义变量，星星的宽度
starHeight = 0, //高度
bgPath = ''; //星星图片地址
if($(this).hasClass('jDisabled') || opts.isDisabled) //确定jDisabled变量，表示是否能对div进行操作
var jDisabled = true;
else
var jDisabled = false;
getStarWidth(); //这个函数不赘述，上面分析过
$(this).height(starHeight); //根据星星的高度，确定此div的高度。
接着往下看：
复制代码 代码如下:
var average = parseFloat($(this).attr('id').split('_')[0]), //通过<div>的id（例如16_2），获取下划线前面的数字，把该数字作为默认的选择比例
idBox = parseInt($(this).attr('id').split('_')[1]), // 下划线后面的部分，作为辨别评分插件的id
widthRatingContainer = starWidth*opts.length, // 星星图片宽度总和，并作为外围容器的宽度
widthColor = average/opts.rateMax*widthRatingContainer, // 颜色块占用的宽度
接下来，我们将看到新建的三个<div>，并插入到主div中
复制代码 代码如下:
quotient =
$('<div>',
{
'class' : 'jRatingColor',
css:{
width:widthColor
}
}).appendTo($(this)),
average =
$('<div>',
{
'class' : 'jRatingAverage',
css:{
width:0,
top:- starHeight
}
}).appendTo($(this)),
jstar =
$('<div>',
{
'class' : 'jStar',
css:{
width:widthRatingContainer,
height:starHeight,
top:- (starHeight*2),
background: 'url('+bgPath+') repeat-x'
}
}).appendTo($(this));
首先我们分析第一个<div>，它的类名为jRatingColor，它表示默认比例，用黄色表示，它的长度为withColor,这里主要看一下它的样式表：
复制代码 代码如下: