[Javascript] 별점 선택 기능

자바스크립트, 제이쿼리와 Awesomefont로 별점 선택하는 기능을 구현했습니다.

 

 

See the Pen StarRating by daeun lee (@daeuun) on CodePen.

 

 

✔ Awesomefont CDN코드

<!--awesome icons--> 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="https://kit.fontawesome.com/69851f8880.js" crossorigin="anonymous"></script>

 

 

1. 가장 기본적인 단계 : script에 작성된 그대로 별점을 css로 표시하기 (사용자 선택 X)

 

 

html

Awesomefont로 아이콘을 가져와서 css와 javacript로 색을 입히는 과정을 진행할 예정이다.

여기서 <i class="fas fa-star"></i> 이것이 별모양 아이콘이다.

<h2>별점 표시하기</h2>
    <div class="review">
        <div class="rating" data-rate="3">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>	
        </div>
        <div class="rating" data-rate="5">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>	
        </div>
        <div class="rating" data-rate="2">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>	
        </div>		
    </div>

 

css

아이콘에 기본 색상을 지정한다.

i{color:#dedede;}

 

script

$(function(){
            /*.rating마다 할 일*/
            var rating = $('.review .rating');
    
            /*each:각각이 할 일*/
            rating.each(function(){
                /*$(this):<div class="rating" data-rate="3">*/
                /*attr로 속성에 접근해서 메서드 가져오기*/
                var targetScore = $(this).attr('data-rate');
                console.log(targetScore);
                $(this).find(' i:nth-child(-n+ ' + targetScore + ')').css({color:'rgb(252, 190, 52)'});
                /*
                    -n+'3' 이 숫자는 targetScore로 받아오고, 
                    숫자 앞까지는 전부 문자열 처리해줌
                */
            })

        })

 

 

 

💡 핵심코드 부연설명

$(this).find(' i:nth-child(-n+ ' + targetScore + ')').css({color:'rgb(252, 190, 52)'});

1.    $(this)로 rating클래스에 접근하고

2.     i태그의 data-rate를 알아오기 위해 .find(  )

3.     :nth-child(N) : 부모 안에 모든 요소 중 N번째 요소 태그를 사용해서 data-rate를 찾아낸다

4.     i:nth-child(-n+원하는숫자) 

 

 

 

 

2. 응용 단계 : 사용자가 선택한 값을 함수로 가져와서 별점을 css로 표시하기 (사용자 선택 O)

 

html

Awesomefont로 아이콘을 가져와서 css와 javacript로 색을 입히는 과정을 진행할 예정이다.

여기서 <i class="fas fa-star"></i> 이것이 별모양 아이콘이다.

<h2>별점주기</h2>
    <div class="make_star">
        <select name="" id="makeStar">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <div class="rating" data-rate="3">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>	
        </div>

 

css

아이콘에 기본 색상을 지정한다.

i{color:#dedede;}

 

script

$(function(){

            var userScore = $('#makeStar')
            userScore.change(function(){
                var userScoreNum = $(this).val();
                console.log(userScoreNum);

                $(' .make_star i ').css( {color:'#dedede'});
                $(' .make_star i:nth-child(-n+ ' + userScoreNum + ')').css({color:'rgb(252, 190, 52)'});
            })

            /*별 아이콘을 클릭하면 할 일*/
            $(' .make_star i ').click(function(){
                
                /*index는 0부터 시작하니까 +1해줘야 targetNum이랑 값이 같아짐*/
                var targetNum = $(this).index()+1;

                $(' .make_star i ').css( {color:'#dedede'});
                $(' .make_star i:nth-child(-n+ ' + targetNum + ')').css({color:'rgb(252, 190, 52)'});
            })

        })

 

💡 핵심코드 부연설명

$(' .make_star i ').css( {color:'#dedede'});
$(' .make_star i:nth-child(-n+ ' + userScoreNum + ')').css({color:'rgb(252, 190, 52)'});

1.    두번째 코드만 작성한다면? 별점을 변경한다면 반영이 되지 않는다!

        만약 별점을 5점 줬다가 3점 주면 별점이 5점 그대로 css가 반영됨

2.     따라서 값이 바뀌면 무조건 초기색으로 설정되게 첫번째 코드를 작성한다.

 

이렇게 하면 선택된 숫자만큼 계속해서 별점의 색이 바뀌도록 만들 수 있다.

 

 

 

 

 

 

 

 

 

출처

https://www.youtube.com/watch?v=BF7Wszaa2vE