Trying to figure out how to create a JavaScript function that can adjust the star rating of an element based on a score using jQuery's addClass and removeClass. I previously had a function for displaying whole stars, but now I am struggling with implementing a system for half-star ratings. Here is my previous code:
function() {
$(this).prevAll().andSelf().addClass('active');
$(this).nextAll().removeClass('active');
}
Does anyone have any advice on how to modify this function for a half-star system? Below is the current code I am working with:
function populateStars(stars, score) {
// The "stars" parameter refers to the container <ul> with individual <li> elements for each star.
// This function should dynamically update the star display based on the given score (ranging from 1 to 5).
}
Here is an example of the HTML structure that "stars" variable points to:
<ul class="big-stars">
<li class="star-1 full">1</li>
<li class="star-2 full">2</li>
<li class="star-3 half">3</li>
<li class="star-4">4</li>
<li class="star-5">5</li>
</ul>
And here is the CSS responsible for styling the stars as full, empty, or half-full:
.big-stars li {
text-indent: -9999px;
width: 49px;
height: 46px;
background: url('../images/big_star_empty.png');
}
.big-stars .full {
background: url('../images/big_star_full.png');
}
.big-stars .half {
background: url('../images/big_star_half.png');
}