Site icon Init HTML

Hệ thống bình chọn (Rating) đơn giản sử dụng jQuery

Admin

Xem demo Tải về

Bài viết này sử dụng Bootstrap 3.4 làm CSS Framework. Bạn cần thêm vào trước </head>.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

HTML

Mình sử dụng cấu trúc HTML có 10 sao như sau.

<div id="cate-rating" class="cate-rating">
	<div class="stars">
		<a id="star-1" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-2" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-3" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-4" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-5" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-6" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-7" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-8" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-9" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-10" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<p id="vote-desc">Mời bạn cho điểm!</p>
	</div>
	<div class="clearfix"></div>
</div>

CSS

CSS đơn giản như sau.

div.stars {}
 
a.star {
    font-size: 24px;
    color: #f0f1f4;
    cursor: pointer;
    line-height: 1;
    transition: all 0.1s ease;
}

a.star.vote-hover {
    color: #96e2fb;
}

a.star:active {
    color: #56CCF2;
}

a.star.vote-active {
    color: #0faef1;
}

.blue {
    color: #0faef1;
}

JavaScript

Các bạn nên sử dụng jQuery để tiện cho việc lập trình.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Thêm đoạn mã sau.

$(document).ready(function() {
    /*
     * Hiệu ứng khi rê chuột lên ngôi sao
     */
    $('a.star').mouseenter(function() {
        if ($('#cate-rating').hasClass('rating-ok') == false) {
            var eID = $(this).attr('id');
            eID = eID.split('-').splice(-1);
            $('a.star').removeClass('vote-active');
            for (var i = 1; i <= eID; i++) {
                $('#star-' + i).addClass('vote-hover');
            }
        }
    }).mouseleave(function() {
        if ($('#cate-rating').hasClass('rating-ok') == false) {
            $('a.star').removeClass('vote-hover');
        }
    });

    /*
     * Sự kiện khi cho điểm
     */
    $('a.star').click(function() {
        if ($('#cate-rating').hasClass('rating-ok') == false) {
            var eID = $(this).attr('id');
            eID = eID.split('-').splice(-1).toString();
            for (var i = 1; i <= eID; i++) {
                $('#star-' + i).addClass('vote-active');
            }
            $('p#vote-desc').html('<span class="blue">' + eID + ' (' + eID * 10 + '%)</span> &middot; ' + 1 + ' đánh giá');
            $('#cate-rating').addClass('rating-ok');
        }
    });
});

Nâng cao

Bạn có thể kết hợp với HTML5 Local Storage và AJAX để phát triển hệ thống chấm điểm hoàn chỉnh. Ví dụ: https://www.ocumeo.com/truyen-tranh/tinh-ca/.

Chúc các bạn thành công!

Exit mobile version