I am facing a simple issue here, but my knowledge of jQuery is limited and I'm struggling to find a solution.
I have been trying to implement a rating function using the code from this link:
Everything seems to be working fine, but I noticed that once a user clicks on a star, they cannot change their rating.
Below is the code snippet:
To build an array of stars:
<p>
<img src="Images/EmptyStar.png" alt="Star Rating" align="middle" id="1" />
<img src="Images/EmptyStar.png" alt="Star Rating" align="middle" id="2" />
<img src="Images/EmptyStar.png" alt="Star Rating" align="middle" id="3" />
<img src="Images/EmptyStar.png" alt="Star Rating" align="middle" id="4" />
<img src="Images/EmptyStar.png" alt="Star Rating" align="middle" id="5" />
</p>
The JavaScript part:
$("img").mouseover(function() {
giveRating($(this), "FilledStar.png");
$(this).css("cursor", "pointer");
});
$("img").mouseout(function() {
giveRating($(this), "EmptyStar.png");
});
//-------
function giveRating(img, image) {
img.attr("src", "Images/" + image).prevAll("img").attr("src", "Images/" + image);
}
When someone clicks on a star, the click event triggers and unbinds as shown below:
$("img).click(function () {
$(img).unbind("mouseout mouseover click");
});
I want users to be able to change their rating even after clicking on a star, whether selecting a higher or lower rating.
If anyone can provide guidance on this simple issue, I would greatly appreciate it!
Thank you in advance for your time and assistance.