3
現在、私はwebshopの評価システムを作っています。基本的に私はそれが動作する方法：訪問者が評価したことがない場合は前星評価システムのホバー
：ビジターが
- 、灰色の次の星（クラスで行います）
- 訪問者がホバーを離れる場合、すべての星を元の状態にリセットしてください。
- 訪問者が星をクリックした場合は、保存して次のスター値を計算し、配列を更新してください。
私はフォントを使用していますので、画像は使用していません。問題は今、私が星の上にマウスを置くと動作しますが、私は星から星に移動したい場合、それは不具合です（星の間に少しの隙間があり、最初に星をリセットすることを意味する）。
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);
}
それは簡単ですが、私はそれを自分のコードにしておきたいと思います。
ありがとう、これは私が必要とするものです！できるだけ早く答えを受け入れます。乾杯！ –
私は助けてくれることを楽しみにしています。 –