Zainab Zainab Zainab Zainab - 1 year ago 136
HTML Question

JQuery 5 star rating system

I'm creating a 5 star rating system with html php and jquery i dont know how to stop the stars rating when user has clicked on rating.
In my code when user click on 4 stars the alert box shows 4 stars but when the user move his mouse from stars the stars shows 0 rating.

here is my code, i'm not posting the css here


<div class="rating">
<div class="ratings_stars" data-rating="1"></div>
<div class="ratings_stars" data-rating="2"></div>
<div class="ratings_stars" data-rating="3"></div>
<div class="ratings_stars" data-rating="4"></div>
<div class="ratings_stars" data-rating="5"></div>


// Handles the mouseover
function() {
// Handles the mouseout
function() {


$('.ratings_stars').click(function() {
$('.ratings_stars').removeClass('selected'); // Removes the selected class from all of them
$(this).addClass('selected'); // Adds the selected class to just the one you clicked

var rating = $(this).data('rating');
// Get the rating from the selected star
$('#rating').val(rating); // Set the value of the hidden rating form element

Answer Source

Guessing because you haven't said what you expect to happen. It could be that you want the selected rating, and the stars before it, to be highlighted.

So instead of this


you use this, similar to how you have previously.


But I would also remove the hover class so that it's obvious to the user on click