Jquery 별점 기능 구현(별점 주기)(removeClass, addClass, attr)

 

별점 주기 기능을 살펴보겠습니다.

 

우선 Jqeury부분을 이렇게 적어 줍니다. 

  #star a{
   text-decoration: none;
   color: gray;
  }
  #star a.on{
   color: red;
  } 

별점 주기 기능의 원리

 

첫 번째 줄은,

a태그를 클릭하니 부모인 p태그를 선택한 다음

다시 자식들은 모두 선택 해 주어 다 클래스를 삭제를 시킵니다.

 

두 번째 줄은,

클릭한 것을 일단 클래스를 추가하여 red로 변형해줍니다.

그다음 이전의 것을 모두 대려 오는 배열을 만들고 그것들의 클래스를 추가해주면

나머지 부분도 red색으로 바뀌게 됩니다.

$('#star a').click(function(){ 
	 $(this).parent().children("a").removeClass("on");    
	 $(this).addClass("on").prevAll("a").addClass("on");
	 console.log($(this).attr("value"));
 });

 

  <P id="star"> <!-- 부모 -->
   <a href="#" value="1">★</a> <!-- 자식들-->
   <a href="#" value="2">★</a>
   <a href="#" value="3">★</a>
   <a href="#" value="4">★</a>
   <a href="#" value="5">★</a>
  <p>

 

 

value="1"인 부분은 database에 넣은 실 때 값을 가져와 사용하시면 됩니다.

 

세 번째 줄은,

attr()라는 함수를 이용하여 value의 값을 가져오고 ajax나 나머지 통신을 이용하여 

값을 넘겨주어 백 단위에서 처리해 주면 되겠습니다.

 

이쪽에 들어가셔서 preAll()에 대한 개념 숙지하시면 이해하시기 편하실 거에요.

https://api.jquery.com/prevAll/

.prevAll() | jQuery API Documentation