4
I’m creating a star rating system for an application of mine. After a little work I managed to get a code on the net and modified it for my purposes. In it, there is a 'full' class that fills the stars according to the user hovers over them, and when he removes the mouse the stars are empty again. Each star has a score.
The problem is that in the code I arranged it makes the entry in the database when the user clicks on the star, and in my case I have a button to send the data. That is, I need that when the user clicks on the star, save her score to use later when the user presses the button, show the full stars up to where he clicked and when he takes the mouse from the div does not get all empty again. And as I mentioned before, I’m very bad at javascript. If any of you can give a little help or some tips I’m very grateful. Follow the code I’ve used so far below:
$(function () {
$('.star').on('mouseover', function () {
var indice = $('.star').index(this);
$('.star').removeClass('full');
for (var i = 0; i <= indice; i++) {
$('.star:eq(' + i + ')').addClass('full');
}
});
$('.star').on('mouseout', function () {
$('.star').removeClass('full');
});
$('.star').on('click', function () {
var ponto = $(this).attr('id');
alert(ponto); // Esta parte é só uma forma para eu manter o controle, para saber se o ponto corresponde a estrela clicada
});
});
OBS:
star is the name of the div where the stars are; full is the class that fills the stars; each star image has an id, with a different score;
Hello Rafael. My answer helped to solve your problem?
– Sergio