jquery评论星星打分特效

<div class="star-rating">
  <span class="star" data-value="1">&#9733;</span>
  <span class="star" data-value="2">&#9733;</span>
  <span class="star" data-value="3">&#9733;</span>
  <span class="star" data-value="4">&#9733;</span>
  <span class="star" data-value="5">&#9733;</span>
</div>

.star-rating .star {
  font-size: 2em;
  cursor: pointer;
  color: grey;
}

.star-rating .star.active {
  color: gold;
}

$(document).ready(function() {
  $('.star').on('click', function() {
    var value = $(this).data('value');
    $('.star').removeClass('active');
    $(this).prevAll().addBack().addClass('active');
    console.log('Rating selected: ' + value);
  });

  $('.star').on('mouseover', function() {
    var value = $(this).data('value');
    $('.star').removeClass('active');
    $(this).prevAll().addBack().addClass('active');
  });

  $('.star-rating').on('mouseleave', function() {
    $('.star').removeClass('active');
  });
});