5星评级脚本

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