Question

我正在写5星评级剧本，但是他没有正常工作，当光标在星上时他会改变，但当你继续其他星星时，前一个星星取消选择我需要所有星星去选择一个一个像正常评级系统。

$('.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 -->

Answer 1

您需要选择当前和之前的星星并取消选择当前星级之后的所有星号..

$('.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');
});

5星评级的脚本

1 个答案: