The star rating system retains value when clicked

Question

I am trying to create a star rating system, I have this code, and I want to make some changes on it, after the user clicks on the stars, he shows a warning about how many stars and it resets colors, what I want is a color fill remained after the user clicks on it and replace the warning with a div under the stars, here is my code:

$(function() { $("div.star-rating > s, div.star-rating-rtl > s").on("click", function(e) { var numStars = $(e.target).parentsUntil("div").length+1; alert(numStars + (numStars == 1 ? " star" : " stars!")); }); }); 

 .star-rating s:hover { color: red; } .star-rating-rtl s:hover { color: red; } .star-rating s, .star-rating-rtl s { color: black; font-size: 50px; cursor: default; text-decoration: none; line-height: 50px; } .star-rating { padding: 2px; } .star-rating-rtl { background: #555; display: inline-block; border: 2px solid #444; } .star-rating-rtl s { color: yellow; } .star-rating s:hover:before, .star-rating s.rated:before { content: "\2605"; } .star-rating s:before { content: "\2606"; } .star-rating-rtl s:hover:after, .star-rating-rtl s.rated:after{ content: "\2605"; } .star-rating-rtl s:after { content: "\2606"; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="star-rating"><s><s><s><s><s></s></s></s></s></s></div> <div class="star-rating-rtl"><s><s><s><s><s></s></s></s></s></s></div> 

Answer 1

See the .active section added in CSS for changes there.

See code and comments in JS

 $(function() { $("div.star-rating > s, div.star-rating-rtl > s").on("click", function(e) { // remove all active classes first, needed if user clicks multiple times $(this).closest('div').find('.active').removeClass('active'); $(e.target).parentsUntil("div").addClass('active'); // all elements up from the clicked one excluding self $(e.target).addClass('active'); // the element user has clicked on var numStars = $(e.target).parentsUntil("div").length+1; $('.show-result').text(numStars + (numStars == 1 ? " star" : " stars!")); }); }); 

 .show-result { margin: 10px; padding: 10px; color: green; font-size: 20px; } .star-rating s:hover, .star-rating s.active { color: red; } .star-rating-rtl s:hover, .star-rating-rtl s.active { color: red; } .star-rating s, .star-rating-rtl s { color: black; font-size: 50px; cursor: default; text-decoration: none; line-height: 50px; } .star-rating { padding: 2px; } .star-rating-rtl { background: #555; display: inline-block; border: 2px solid #444; } .star-rating-rtl s { color: yellow; } .star-rating s:hover:before, .star-rating s.rated:before, .star-rating s.active:before { content: "\2605"; } .star-rating s:before { content: "\2606"; } .star-rating-rtl s:hover:after, .star-rating-rtl s.rated:after, .star-rating-rtl s.active:after { content: "\2605"; } .star-rating-rtl s:after { content: "\2606"; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="star-rating"><s><s><s><s><s></s></s></s></s></s></div> <div class="star-rating-rtl"><s><s><s><s><s></s></s></s></s></s></div> <div class="show-result">No stars selected yet.</div> 

Answer 2

Here are two options:

When the user clicks, set the class in the parent container == to get a star rating, for example rated-3 . Then use CSS ' first-child and selector clips to activate the first star and N more stores.

When the user clicks, use JS to set class="active" on all stars before and including by clicking the star.

In both scenarios, replicate your CSS hover to apply to .active or :first-child, :first-child+s,... .active :first-child, :first-child+s,... elements.

Answer 3

Here is how you can do it. Add another div under your star divs and give it an id, say id = selectedStars

in your js code replace the alert string with this

document.getElementById ('selectedStars') innerHTML = numStars ;.

here you go, it will give you the selected number of stars in the last div

Answer 4

Here's an option using the rated class that you have in your CSS.

 //remove ratings $("s").removeClass("rated"); //adds the rated class $(e.target).parents("s").addClass('rated'); $(e.target).closest("s").addClass('rated');