Star Ratings

by kthornbloom

HTML

<div class="stars">
  <a href="#" class="star"><i class="fa fa-star"></i></a>
  <a href="#" class="star"><i class="fa fa-star-o"></i></a>
  <a href="#" class="star"><i class="fa fa-star-o"></i></a>
  <a href="#" class="star"><i class="fa fa-star-o"></i></a>
  <a href="#" class="star"><i class="fa fa-star-o"></i></a>
  <input type="text" value="test">
</div>

<br><br>

<div class="stars">
  <a href="#" class="star"><i class="fa fa-star"></i></a>
  <a href="#" class="star"><i class="fa fa-star-o"></i></a>
  <a href="#" class="star"><i class="fa fa-star-o"></i></a>
  <a href="#" class="star"><i class="fa fa-star-o"></i></a>
  <a href="#" class="star"><i class="fa fa-star-o"></i></a>
  <input type="number">
</div>

SCSS

.stars {
  width:100px;
  input {
    /*
    display:none;
    */
  }
}

.stars:hover {
  .star {
    box-shadow:inset 0 0 1px 0 blue;
  }
}

.stars:after{
  content:'';
  display:block;
  clear:both;
}

.star {
  width:20px;
  height:20px;
  float:left;
}

.fa-star {
  display:block;
  width:10px;
  height:10px;
  background:#222;
}
.fa-star-o {
  display:block;
  width:10px;
  height:10px;
  box-shadow:inset 0 0 1px 0 #222;
}
.hovered {
  background:red!important;
}
body {
  padding:20px;
}

JavaScript

$('.stars').on('click','.star',function(){
	var i = $(this).index(),
  		i = i+1;
  $(this).parent().find('input').attr('value',i);
  $(this).parent().find('.star').html('<i class="fa fa-star-o"></i>');
  $(this).parent().find('.star:lt('+i+')').html('<i class="fa fa-star"></i>');
});

$(document).on('mouseover','.star',function(){
	var i = $(this).index(),
  		i = i+1;
  $(this).parent().find('.hovered').removeClass('hovered');
  $(this).parent().find('.star:lt('+i+')').addClass('hovered');
});

$(document).on('mouseout','.stars',function(){
$('.hovered',this).removeClass('hovered');
});