별점 구현

fontawesome 5.15.4 free icon을 사용하여 만든 동적 별점 기능이다.

 

html 코드

<div style="position : relative;z-index: 1; float : left;">
    <i class="far fa-star fa-lg" id="star1"></i>
    <i class="far fa-star fa-lg" id="star2"></i>
    <i class="far fa-star fa-lg" id="star3"></i>
    <i class="far fa-star fa-lg" id="star4"></i>
    <i class="far fa-star fa-lg" id="star5"></i>
    &nbsp;&nbsp;<span id="star_num">0</span>
</div>
<div style="position : absolute;z-index: 2;opacity : 0;">
    <input type="range" oninput="change_star(this)" id="rrange" value="0" step="1" min="0" max="10" style="height: 10px; width: 141px;" >
</div>
<input type="hidden" value="" name="star" id="star" /> {{-- 나중에 데이터베이스에 저장할 값 --}}

 

 

 

 

js 코드

function change_star(me) {
        
        let empty_star = 'far fa-star fa-lg';
        let half_star = 'fas fa-star-half-alt fa-lg';
        let full_star = 'fas fa-star fa-lg';
        let empty_star = 'far fa-star fa-lg';
        let half_star = 'fas fa-star-half-alt fa-lg';
        let full_star = 'fas fa-star fa-lg';

        
        if (me.value == 0) {
            $('#star1').attr('class', empty_star);
            $('#star2').attr('class', empty_star);
            $('#star3').attr('class', empty_star);
            $('#star4').attr('class', empty_star);
            $('#star5').attr('class', empty_star);
        }
        else if (me.value == 1) {
            $('#star1').attr('class',half_star);
            $('#star2').attr('class',empty_star);
            $('#star3').attr('class',empty_star);
            $('#star4').attr('class',empty_star);
            $('#star5').attr('class',empty_star);
        }
        else if (me.value == 2) {
            $('#star1').attr('class',full_star);
            $('#star2').attr('class',empty_star);
            $('#star3').attr('class',empty_star);
            $('#star4').attr('class',empty_star);
            $('#star5').attr('class',empty_star);
        }
        else if (me.value == 3) {
            $('#star1').attr('class',full_star);
            $('#star2').attr('class',half_star);
            $('#star3').attr('class',empty_star);
            $('#star4').attr('class',empty_star);
            $('#star5').attr('class',empty_star);
        }
        else if (me.value == 4) {
            $('#star1').attr('class',full_star);
            $('#star2').attr('class',full_star);
            $('#star3').attr('class',empty_star);
            $('#star4').attr('class',empty_star);
            $('#star5').attr('class',empty_star);
        }
        else if (me.value == 5) {
            $('#star1').attr('class',full_star);
            $('#star2').attr('class',full_star);
            $('#star3').attr('class',half_star);
            $('#star4').attr('class',empty_star);
            $('#star5').attr('class',empty_star);
        }
        else if (me.value == 6) {
            $('#star1').attr('class',full_star);
            $('#star2').attr('class',full_star);
            $('#star3').attr('class',full_star);
            $('#star4').attr('class',empty_star);
            $('#star5').attr('class',empty_star);
        }
        else if (me.value == 7) {
            $('#star1').attr('class',full_star);
            $('#star2').attr('class',full_star);
            $('#star3').attr('class',full_star);
            $('#star4').attr('class',half_star);
            $('#star5').attr('class',empty_star);
        }
        else if (me.value == 8) {
            $('#star1').attr('class',full_star);
            $('#star2').attr('class',full_star);
            $('#star3').attr('class',full_star);
            $('#star4').attr('class',full_star);
            $('#star5').attr('class',empty_star);
        }
        else if (me.value == 9) {
            $('#star1').attr('class',full_star);
            $('#star2').attr('class',full_star);
            $('#star3').attr('class',full_star);
            $('#star4').attr('class',full_star);
            $('#star5').attr('class',half_star);
        }
        else if (me.value == 10) {
            $('#star1').attr('class',full_star);
            $('#star2').attr('class',full_star);
            $('#star3').attr('class',full_star);
            $('#star4').attr('class',full_star);
            $('#star5').attr('class',full_star);
        }
        
        

        $('#star_num').empty();
        $('#star_num').html(me.value);
    }