[JS|jQuery] 리뷰 별점 기능 구현하기

별 갯수에 따른 별점 기능을 구현해보자

 

 

• 별을 클릭할 때마다 별의 색깔과 점수가 바뀌어야한다.
  • 별점 변수를 담을 hidden 태그 필요하다.
  • 클릭한 별의 색깔이 바껴야한다. (1점부터 누른 별까지)
• 별점을 선택하지 않으면 로딩된 페이지 그대로(별 5개) 넘어간다.
  • 폼데이터가 넘어가기 전에 유효성 검사를 해주거나 
  • 해당 hidden 태그의 value를 5로 주면 된다. 초기화와 같은 개념.

...
<div class="p-1">
	<p class="star">
		<a href="#" class="on">★</a>
		<a href="#" class="on">★</a>
		<a href="#" class="on">★</a>
		<a href="#" class="on">★</a>
		<a href="#" class="on">★</a>
		<input type="hidden" name="score" value="5">
	</p>
</div>

...

 

 - 별의 클래스 값에 on이 있으면 노란색(#f2cb61) 으로 나타낸다.

.review-form .star a.on { color: #f2cb61; }

 

prevAll()

 - 선택한 자신 요소 이전의 모든 형제요소들을 고르는 메소드를 사용하자.

 - 3점을 선택했다면, 이전의 모든 별(1~2점)을 가져와서 처리할 것이다.

addClass()

 - 클래스 값을 추가하는 메소드를 사용하자.

 - 우선 모든 클래스의 on 값을 제거한다.

 - 그 후 1점부터 클릭된 별까지의 객체를 가져와서 클래스값에 on 을 추가한다.

 - on인 별의 갯수 = 별점 

$(function() {
	$(".review-form .star a").click(function() {
		let b = $(this).hasClass("on");
		$(this).parent().children("a").removeClass("on");
		$(this).addClass("on").prevAll("a").addClass("on");
		if( b ) {
			$(this).removeClass("on");
		}
		
		let s = $(".review-form .star .on").length;
		document.reviewForm.score.value = s;
		
		return false;
		
	});
});