JQuery로 토글 클래스를 넣는 방법은 매우 간단하다.
$(document).ready(function() {
$('.score li').click(function() {
$(this).toggleClass('clicked');
$('.score li').not(this).removeClass('clicked');
})
})
0점부터 10점까지 점수를 매기는 화면을 구현하고자 했고,
중복 선택이 안되는 단일 선택형 점수 평가 기능이었다.
.score라는 클래스를 가진 ul과 각 점수 버튼을 li로 구현하였고,
this로 클릭한 li에 clicked 클래스를 부여한다.
해당 클래스에는 css로 디자인 작업을 추가해준다.
너무 단순한 퍼블리싱 작업이지만 나는 기억력이 닭둘기 수준이므로
이런 것도 일단 적어둔다.