Поле со звёздочками для рейтинга. Создаём поле рейтинга для формы

В новой записи я покажу вам готовый, анимированный код для вывода рейтинга товара. Данный код вы можете использовать для форм добавления отзывов о товаре. Звёздочки анимируются при наведение.

Оцените товар

Для получения данного эффекта мы будет использовать 2 иконки звёздочек и jQuery скрипт, который будет скрывать ненужные иконки. При нажатие на нужное количество, звёздочки фиксируют значение.

HTML

Вёрстка данного блока состоит из пяти одинаковых блоков с иконками + поле для фиксации выбранного значения. При нажатии на звёздочку, указанный результат звёзд записывается в поле с типом "checkbox".

<div class="countStarsBlock rowFields">
    <div class="textCountStars">Оцените товар</div>
	<div class="listElemStar">
		<div class="iconStar iconStar_1" data-check-val="1">
			<div class="fullStars">
			    <img src="/icon_star.png">
			</div>
			<div class="emptyStars">
			    <img src="/icon_star_empty.png">
			</div>
			</div>
		<div class="iconStar iconStar_2" data-check-val="2">
			<div class="fullStars">
			    <img src="/icon_star.png">
			</div>
			<div class="emptyStars">
			    <img src="/icon_star_empty.png">
			</div>
		</div>
		<div class="iconStar iconStar_3" data-check-val="3">
			<div class="fullStars">
			    <img src="/icon_star.png">
			</div>
			<div class="emptyStars">
			    <img src="/icon_star_empty.png">
			</div>
		</div>
		<div class="iconStar iconStar_4" data-check-val="4">
			<div class="fullStars">
			    <img src="/icon_star.png">
			</div>
			<div class="emptyStars">
			    <img src="/icon_star_empty.png">
			</div>
		</div>
		<div class="iconStar iconStar_5" data-check-val="5">
			<div class="fullStars">
			     <img src="/icon_star.png">
			</div>
		        <div class="emptyStars">
			    <img src="/icon_star_empty.png">
			</div>
		</div>
		<input style="display:none" type="checkbox" value="5" checked="" name="countStars">
	</div>
</div>

CSS

.countStarsBlock {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 20px;
}
.countStarsBlock .listElemStar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.countStarsBlock .iconStar {
    cursor: pointer;
    padding: 0 3px;
}
.countStarsBlock .iconStar .emptyStars {
    display: none;
}
.countStarsBlock .iconStar svg {
    width: 20px;
    height: 20px;
}

jQuery

С помощью JS мы отлавливаем события mouseenter и mouseleave и затем показываем или убираем видимость звёздочек рейтинга, а с помощью события "click" фиксируем нажатие и записываем результат.

/* для вывода звёзд рейтинга */
let numberStars;
$(".countStarsBlock .iconStar")
.mouseenter(function() {
	numberStars = parseInt($(this).attr("data-check-val"));

	for(let i = 1; i<=5; i++) {
		if(i <= numberStars) {
			$(".iconStar_"+i).find(".emptyStars").css("display", "none");
			$(".iconStar_"+i).find(".fullStars").css("display", "block");
		}
		else {
			$(".iconStar_"+i).find(".fullStars").css("display", "none");
			$(".iconStar_"+i).find(".emptyStars").css("display", "block");
		}
	}

})
.mouseleave(function(){    
	numberStars = $(".countStarsBlock input[type='checkbox']").val();

	for(let i = 1; i<=5; i++) {
		if(i <= numberStars) {
			$(".iconStar_"+i).find(".emptyStars").css("display", "none");
			$(".iconStar_"+i).find(".fullStars").css("display", "block");
		}
		else {
			$(".iconStar_"+i).find(".fullStars").css("display", "none");
			$(".iconStar_"+i).find(".emptyStars").css("display", "block");
		}
	}
});
/* ================================== */

/* при нажатии на звёздочку - сохраняем значение */
$(".countStarsBlock .iconStar").on("click", function() {
	let valCheck = $(this).attr("data-check-val")
	$(".countStarsBlock input[type='checkbox']").val(valCheck);
})
/* ================================== */