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");}
);