CODEWITHSUNDEEP
phpjquerymysql
Saulius Antanavicius
Saulius Antanavicius

Reputation: 1381

jQuery rating system

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!

Upvotes: 1

Views: 867

Answers (4)

Karolis
Karolis

Reputation: 9562

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/

Upvotes: 1

jfriend00
jfriend00

Reputation: 707148

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

Upvotes: 3

Nigel Thorne
Nigel Thorne

Reputation: 21548

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

Upvotes: 0

g_thom
g_thom

Reputation: 2810

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

Upvotes: 2

Related Questions