jQuery rating system - php

Question

I'm trying to make a rating system from 0, so far I have two classes on and off, there are total of 5 stars,
It would show the rating of the item, until the person hovers over them, then it would hilight the previous stars and hide the current rating,
<div id="stars">
<div class="on"></div>
<div class="on"></div>
<div class="on"></div>
<div class="off"></div>
<div class="off"></div>
</div>
the JS I got so far
$('#stars').mouseover(function() {
$(this).children().prevAll().andSelf().attr('class', 'on');
$(this).nextAll().attr('class', 'on');
});
Which only hilights all the starts and messes up everything, anyone could help out? Working too many hours and just can't get it to work..
Thanks!

Answer 1

If you're using this as a preview before a click, then you may want to use the hover function like this:
$('#stars .star').hover(
function() {
$(this).prevAll().andSelf().addClass('on');
$(this).nextAll().removeClass('on');
},
function() {
$(this).parent().children().removeClass('on');
}
);
That goes with the HTML in this jsFiddle where you can see it work: http://jsfiddle.net/jfriend00/aRTzQ/
I'd also suggest using addClass() and removeClass() rather than manipulating the attribute directly as it gives you more flexibility to have other classes on the object and it's more readable.
To make a click sticky so it then remembers that setting, you could use something like this: http://jsfiddle.net/jfriend00/QxADg/. The corresponding CSS/HTML is in the fiddle.
$('#stars .star').hover(
function() {
$(this).prevAll().andSelf().addClass('preview');
$(this).nextAll().removeClass('preview');
},
function() {
$(this).parent().children().removeClass('preview');
}
);
$('#stars .star').click(function() {
$(this).parent().children().removeClass('on');
$(this).prevAll().andSelf().addClass('on');
});
$('#stars').hover(
function() {$(this).addClass("inPreview");},
function() {$(this).removeClass("inPreview");}
);

Answer 2

There's a lot of plugins out there, such as the one PPrice links to. I agree with others that that would be the better way to go unless they don't meet your needs for some reason.
If you want to make this code work or if you're just doing this for the learning, maybe this is what you're trying to do?
You can hover over the "stars" (boxes) to see the colour change.
http://jsfiddle.net/pW3Sn/
$('#stars > div').mouseover(function() {
$(this).prevAll().andSelf().attr('class', 'on');
$(this).nextAll().attr('class', 'off');
});

Answer 3

Actually you can implement it using pure CSS.
HTML code:
<div id="stars">
<div class="star">
<div class="star">
<div class="star">
<div class="star">
<div class="star"></div>
</div>
</div>
</div>
</div>
</div>
And CSS:
#stars {
height: 16px; /* height of stars block */
}
#stars .star {
height: 16px; /* height of one star */
padding-left: 16px; /* width of one star */
background-image: url('http://url.to.your.star.image');
float: left;
}
#stars .star:hover,
#stars .star :hover {
background-position: 0px -16px; /* toggle image */
}
A working example: http://jsfiddle.net/4CfzD/

Answer 4

Why not just use someone's plugin? e.g. http://www.fyneworks.com/jquery/star-rating/