3
目前我正在爲一個網上商店做一個評級系統。基本上，我怎麼想它的工作：星級評價系統盤旋
如果從未額定遊客面前：遊客懸停在星
- ，未來星灰色（帶班完成）
- 如果訪問者離開懸停，將所有星星重置爲舊狀態
- 如果訪問者點擊星號，保存它，計算下一個星號值並更新數組。
我使用的字體真棒，所以我沒有使用任何圖像。現在的問題是，如果我將鼠標懸停在一顆恆星上，它可以工作，但如果我想從恆星移動到恆星，它會發生故障（因爲恆星之間有一點距離，這意味着它會首先重置恆星）。
的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);
}
我知道有很多庫，使它更容易，但如果可以的話，我想保留自己的代碼。
謝謝，這正是我所需要的！我會盡快接受答案。乾杯! –
我很樂意提供幫助，祝您有個愉快的日子 –