javascript - 5星评级脚本

我正在编写5星评级脚本，但是hes不能正常工作，当光标位于星上时，他会改变，但是当您选择另一颗星时，取消选择上一个星是什么，我需要所有星都像下面这样逐个选择正常收视率系统。

$('.fa-star-o').mouseover(function() {
    $(this).removeClass('fa-star-o');
    $(this).addClass('fa-star');


}).mouseout(function() {
    $(this).removeClass('fa-star');
    $(this).addClass('fa-star-o');
});


                <div class="companies-list-item-rating">
                    <i class="fa fa-star-o"></i>
                    <i class="fa fa-star-o"></i>
                    <i class="fa fa-star-o"></i>
                    <i class="fa fa-star-o"></i>
                    <i class="fa fa-star-o"></i>
                    <span class="companies-list-item-rating-count">/ 53</span>
                </div><!-- /.companies-list-item-rating -->
            </div><!-- /.companies-list-item -->

最佳答案

您需要选择当前和之前的星星，然后取消选择当前星星之后的所有星星。

$('.fa-star-o').mouseover(function() {
    $(this).addClass('fa-star');
    $(this).prevAll('.fa-star-o').addClass('fa-star');
    $(this).nextAll('.fa-star-o').removeClass('fa-star');
}).mouseout(function() {
    $(this).parent().children('.fa-star-o').removeClass('fa-star');
});

关于javascript - 5星评级脚本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37520007/