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

30.04.2022
Содержание:

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

Оцените товар
Иконка звезды
Иконка звезды
Иконка звезды
Иконка звезды
Иконка звезды
Иконка звезды
Иконка звезды
Иконка звезды
Иконка звезды
Иконка звезды

Для получения данного эффекта мы будет использовать 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);
})
/* ================================== */
На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Наши планы
  • Написание материала для курса по разработке ботов на Telegram
  • Разработка универсального парсера на PHP

Поддержите мой сайт!

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube