我正在为一个网店制作评分系统。基本上我想要的是这样的：
如果访问者之前没有进行过评分：
- 访问者将鼠标悬停在星星上
- 前一个和当前的星星将变成黄色，下一个星星将变成灰色（使用class实现）
- 如果访问者离开了悬停状态，则将所有星星重置为旧状态
- 如果访问者点击了一个星星，则保存它，计算下一个星星的值并更新数组。
我使用的是font awesome，所以不使用任何图像。现在的问题是，如果我悬停在一个星星上，它可以工作，但如果我想从一个星星移动到另一个星星，它会出现故障（因为星星之间有一点间隙，这意味着它会先重置星星）。
jsfiddle: https://jsfiddle.net/uappvz3y/
JS:
var current_star_statusses = [];
star_elements = $('.fa-star');
star_elements.each(function(i, elem)
{
current_star_statusses.push($(elem).hasClass('yellow'));
});
star_elements.mouseenter(changeRatingStars);
star_elements.mouseleave(resetRatingStars);
/**
* Changes the rating star colors when hovering over it.
*/
function changeRatingStars()
{
// Current star hovered
var star = $(this);
// Removes all colors first from all stars
$('.fa-star').removeClass('gray').removeClass('yellow');
// Makes the current hovered star yellow
star.addClass('yellow');
// Makes the previous stars yellow and the next stars gray
star.parent().prevAll().children('.fa-star').addClass('yellow');
star.parent().nextAll().children('.fa-star').addClass('gray');
}
/**
* Resets the rating star colors when not hovered anymore.
*/
function resetRatingStars()
{
star_elements.each(function(i, elem)
{
$(elem).removeClass('yellow').removeClass('gray').addClass(current_star_statusses[i] ? 'yellow' : 'gray');
});
}
HTML:
<ul class="list-inline rating-list">
<li><i class="fa fa-star yellow"></i></li>
<li><i class="fa fa-star yellow"></i></li>
<li><i class="fa fa-star yellow"></i></li>
<li><i class="fa fa-star yellow"></i></li>
<li><i class="fa fa-star gray"></i></li>
</ul>
CSS：
.fa-star:before {
content: "\f005";
}
.rating-list li i.yellow {
color: #FFD700;
}
.rating-list li i.gray {
color: #bbb;
}
.list-inline>li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
.rating-list li {
padding: 0px;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
我知道有很多库可以让它变得更容易，但如果可以的话，我想保留自己的代码。