(js) 평점 별찍기
평점 드래그에 대해선 정보들이 좀 있었는데 DB에서 받아온 평점 값을 화면에 별로 보여주는 부분에 대해선 자료가 별로 없었다... 그래서 이래 저리 머리를 쓰다가 jquery 로 하나 짰다.
나는 화면 상세페이지에 한 상품에 대한 별점을 보여주고자 하였다.
처음엔 이걸 전부 if else로 돌렸다.
var grade = $('.gradeNum').text(); //기존것
if(grade < 1.5){
//alert(grade+'1');
$('.gradeStar').empty();
$('.gradeStar').append('<i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i>') ;
}else if(grade >= 1.5 && grade < 2){
// alert(grade+'1.5');
$('.gradeStar').empty();
$('.gradeStar').append('<i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i>') ;
}else if ( grade >= 2 && grade < 2.5){
// alert(grade+'2');
$('.gradeStar').empty();
$('.gradeStar').append('<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i>') ;
}else if (grade >= 2.5&& grade < 3){
// alert(grade+'2.5');
$('.gradeStar').empty();
$('.gradeStar').append('<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i>') ;
}else if (grade >= 3 && grade < 3.5){
// alert(grade+'3');
$('.gradeStar').empty();
$('.gradeStar').append('<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i>') ;
}else if (grade >= 3.5&& grade < 4){
// alert(grade+'3.5');
$('.gradeStar').empty();
$('.gradeStar').append('<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i><i class="fa-regular fa-star"></i>') ;
}else if (grade >= 4 && grade < 4.5){
// alert(grade+'4');
$('.gradeStar').empty();
$('.gradeStar').append('<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i>') ;
}else if (grade >= 4.5 && grade < 5){
// alert(grade+'4.5');
$('.gradeStar').empty();
$('.gradeStar').append('<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i><i class="fa-regular fa-star"></i>') ;
}else if (grade == 5){
// alert(grade+'4.5');
$('.gradeStar').empty();
$('.gradeStar').append('<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>') ;
} */$('.gradeNum').text() : 해당 평점 값이 넘어오는 부분은 div로 감싼 상태이고 해당 div의클래스 명이 gradeNum이다.
div 태그의 요소 값은 text() 로 값을 가져올수 있다. 나는 3.8을 가져온다.
그래서 div 태그에 담겨있는 value값을 가져와서 그 값을 스크립트에 변수grade 로 담아주고
그 변수의 값의 구간을 잡고 분기를 치면서 별점이 들어갈 위치인 gradeStar 에 별점을 append 했다. 별점 아이콘이 들어갈 자리도 div로 감쌌고 div에 클래스로 gradeStar로 줬다. 이렇게 주면 해당 위치 gradeStar 에서 empty로 그 div 태그 아래 요소 부분을 비워준다
나는 fontawesome에서 폰트를 따와서 하나하나 나열하며 썼었다.
애초에 div 태그인 gradeStar아래에 요소가 아무것도 없어서 empty로 안비워도 되긴할텐데혹시나 하는 생각에 비웠다.
참고로 나는 이 페이지 자체가 하나의 페이지라서 화면이 열릴때 별점이 보여야 해서 $('document').ready()의 줄임말인 $(function(){ }); 안에 넣어줬다.
html 코드는 전부 보여주기엔 지금 진행하는 화면이 너어어무 복잡한구조가 되어버려서 다 올릴수없고 해당 부분만 올려본다.
<div class="grade">
<div class="gradeNum">3.8</div>
<div class="gradeStar"></div>
</div>그런데 스크립트가 저렇게 보듯 반복되고 하는것이 너무 길어지고 나는 이 페이지에 모달창도 들어가고, input 태그의 slider 부분도 값을 주고받으며 들어가기때문에 전체 코드가 너무 길어졌다.
그래서 뭐하나라도 줄여보고자 해당 스크립트를 바꾸기로 했다. 사실 여기 ready 부분에 들어갈 기능이 하나 더 추가되야하는데 해당 코드가 너무길어서 줄였다.
$(function(){
var grade = $('.gradeNum').text().split('.');// 2.2 -> 2 2
alert(grade[0]+" , " +grade[1]);
// var gradeSub = grade[1].substring(0,1); // 소숫점이 두자리 까지 나오는데 그걸 한자리로 만듬? -> 난 한자리로 나와서 불필요
if(grade[1]>=5 && grade[1]<=9){// 소숫점자리수가 5부터 9일때 오른쪽 반별이 필요함 근데 오른쪽 반별을 사이로 앞뒤에 찬별 빈별와야함
for(var i = 0; i < 4-grade[0];i++){ // 반별을 빼면총 4자리 중에 점수가 3점이니 빈 별은 1개 와야함
$('.gradeStar').prepend('<i class="fa-regular fa-star"></i>');
}
// 반별넣기
$('.gradeStar').prepend('<i class="fa-solid fa-star-half-stroke"></i>');
}else{
// .5 가 넘지 않으면 반별 없이 전부 빈별로 나옴
for(var i=0; i< 5-grade[0];i++){
$('.gradeStar').prepend('<i class="fa-regular fa-star"></i>');
}
}
for(var i=0; i<grade[0]; i++ ){
$('.gradeStar').prepend('<i class="fa-solid fa-star"></i>');
}
});일단 바뀐 코드는 위와 같이 생겼다.
보면 우선 1.0 혹은 3.9 이런식으로 값이 들어 올수밖에 없다. 나는 왜냐면 평점이라 여러 값을 합쳐서 평균내는거니까.
그래서 .을 기준으로 split 해줬다.
다만 이 코드 처음에 동기가 먼저 구상했는데 동기는 별점을 여러 상품별로 보여줘야해서 애초에 이 자체가 for문으로 돌아간다. 그래서 그런가 나는 소숫점 첫째 자리인 3.1 이런식으로 나오는데 동기는 3.10 이렇게 소숫점 둘째 자리까지 나왔다고 한다. 그래서 substring(0,1)을 통해서 0번째부터 1번째 이전까지 즉 맨 첫자리만 보여주도록하였다.
가장 먼저 나는 애초에 .5점 이상일때만 별이 반개짜리를 보여주려 한것이고 .5가 안되는것들은 그냥 값을 버렸다.
그래서 소숫점 자릿수가 5부터 9일때까지 기준으로 반별을 한개 넣어주도록 하였다.
반별이 들어간다면 총 별의 갯수는 5개인데 반별 빼면 4개이다.
for 문을 돌리면서 아무것도 없는 빈 별은 총 4개 - 별점의 앞자릿수 하면된다.
이런식으로 계산해주는데 여기서 나는 별을 추가할때 append 하지않고 prepend 했다.
=> prepend()하면 추가하고자 하는 값이 내가 지정한 요소의 앞쪽으로 들어간다. 나는 빈별을 먼저 넣고 반별 넣고 꽉찬 별을 넣을거라 값이 앞으로 들어갔어야했다. 안그러면 반별처리가 헷갈리는..?
애초에 기준을 별점은 .5점 이상이 반별이야 라고 정했기 때문일것이다.
이런식으로 별점을 보여줬다.
혹시 내가 다음에 또 별점기능을 쓸것 같아 정리한다.
한 5개월 후에 읽어서 이해 안되면 다시 코드 헤집어 봐야지...