我有一个带有以下 html 的五星级评级系统：
<div class="rate-small rate0"></div>
如果读取rate-small rate50表示所有 5 颗星都突出显示，则同样rate-small rate25表示 2.5 颗星。
我想要做的是当用户将鼠标悬停在星星上时，当用户沿着星星移动鼠标时，它们会突出显示适当数量的星星。因此，如果它们悬停在第二颗星星上，那么第一颗和第二颗星星就会被突出显示。如果他们在第五颗星上，所有的星星都会被突出显示。单击然后记录评级。
我的 Jquery 似乎工作得很好，但现在当我 console.log 以供参考时，坐标似乎完全关闭了。最终，我无法掌握如何告诉 jquery 何时使用 mousemove 更改类。坐标似乎有一次是正确的，但下一次却不是。最终我不喜欢我设置它的方式，显然它不能很好地工作，似乎应该有更好的方法来按比例应用悬停类而不使用这样的静态坐标，但我就是不能相当找出最好的方法：
var rate={
start: function(){
$('body').on('mousemove','div.rate-small',function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
//console.log(y);
if(x>'534' && x<'662'){
rate.makeBold();
if(x>'540' && x<'550'){
$(this).attr('class','rate-small rate5')
}
else if(x>'550' && x<'560'){
$(this).attr('class','rate-small rate10')
}
else if(x>'560' && x<'570'){
$(this).attr('class','rate-small rate15')
}
else if(x>'570' && x<'580'){
$(this).attr('class','rate-small rate20')
}
else if(x>'580' && x<'590'){
$(this).attr('class','rate-small rate25')
}
else if(x>'590' && x<'600'){
$(this).attr('class','rate-small rate30')
}
else if(x>'600' && x<'610'){
$(this).attr('class','rate-small rate35')
}
else if(x>'610' && x<'620'){
$(this).attr('class','rate-small rate40')
}
else if(x>'620' && x<'630'){
$(this).attr('class','rate-small rate45')
}
else if(x>'630' && x<'660'){
$(this).attr('class','rate-small rate50')
}
}
}).on('mouseleave','div.rate-small', function(){
$(this).attr('class','rate-small rate0');
rate.removeBold();
}).on('click','div.rate-small', function(){
var rateId = ($(this).attr('id'));
var rateClass = ($(this).attr('class'));
var rateNum = rateClass.replace(/[^0-9]/g, '')
rate.sendrate(rateId,rateNum)
})
},
}
注意：这段代码运行得很好，但是现在当我控制台记录 y 坐标时，我在 Chrome、FF 和 IE 上的误差大约是两三百。再说一次，我是一个没有得到正确坐标的人，或者有更好的方法来做到这一点，而无需在 div 中指定如此严格的数字。