Raiting stars. Отображение рейтинга в виде звездочек

index.html

<div class="wrap_stars"> 
	<div class="stars" num="1"></div>
	<div class="stars" num="2"></div>
	<div class="stars" num="3"></div>
	<div class="stars" num="4"></div>
	<div class="stars" num="5"></div>
	<input type="hidden" name="clean_order">
	<div class="wrap_stars__label"></div>
</div>

<div class="wrap_stars_fixed"> 
	<div class="stars st_true stars_on" num="1"></div>
	<div class="stars st_true stars_on" num="2"></div>
	<div class="stars st_true stars_on" num="3"></div>
	<div class="stars st_true stars_on" num="4"></div>
	<div class="stars st_true stars_on" num="5"></div>
	<br>
	<a href="#recomend" class="dashed">Ваш отзыв</a>
</div>

script.js

$('.wrap_stars .stars').on('mouseenter', function() {
	var $wrap_stars = $(this).closest('.wrap_stars'),
		k = $(this).attr('num'),
		$stars = $wrap_stars.find('.stars'),
		$label = $wrap_stars.find('.wrap_stars__label');

	switch(k) {
		case '1':
			$label.text('очень плохо');
			break;
		case '2':
			$label.text('плохо');
			break;
		case '3':
			$label.text('средне');
			break;
		case '4':
			$label.text('хорошо');
			break;
		case '5':
			$label.text('отлично!');
			break;
	}
	if (!($(this).hasClass('st_true'))) {
		$stars.removeClass('stars_on');
		$stars.each(function(i,el) {
			if ($(el).attr('num') <= k) {
				$(el).addClass('stars_on');
			};
		});
	};   
});

$('.wrap_stars .stars').on('mouseout', function() {
	var $wrap_stars = $(this).closest('.wrap_stars');
	
	$wrap_stars.find('.wrap_stars__label').text('');
	$wrap_stars.find('.stars').each(function(i,el) {
		if (!($(el).hasClass('st_true'))) {
			$(el).removeClass('stars_on');
		}
	});    
});

$('.wrap_stars .stars').on('click', function() {
	var k = $(this).attr('num'),
		$wrap_stars = $(this).closest('.wrap_stars'),
		$stars = $wrap_stars.find('.stars');

	$stars.each(function(i, el) {
		$(el).removeClass('st_true');
		$(el).removeClass('stars_on');
	});         
	$wrap_stars.find('[type=hidden]').val(k);
	$stars.each(function(i, el) {
		if ($(el).attr('num') <= k) {
			$(el).addClass('stars_on');
			$(el).addClass('st_true');
		};
	});
});

style.css

/*STARS*/
.wrap_stars,
.wrap_stars_fixed {
    position: relative;
    display: inline-block;
}
    .wrap_stars:after,
    .wrap_stars_fixed:after {
        content: '';
        clear: both;
        display: table;
    }
    .wrap_stars .stars,
    .wrap_stars_fixed .stars {
        background: url('images/icon-stars-sprite.png') no-repeat scroll 0 -19px transparent;
        padding: 20px 0 0 25px;
        float:left;
        margin: 5px 0;
        cursor: pointer;
    }
    .wrap_stars_fixed .stars {
        cursor: default;
        background-position: 0 -40px;
    }
    .wrap_stars .stars_on,
    .wrap_stars_fixed .stars_on {
        background: url('images/icon-stars-sprite.png') no-repeat scroll 0 0px transparent;
    }
    .wrap_stars__label {
        position: absolute;
        left: 0;
        bottom: -17px;
        color: #919191;
    }