CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Aaron
Aaron

Reputation: 3255

Front end UI graphical mechanism for 5 star rating

I have a 5 star rating system which works fine from functional perspective.

I have 5 separate images for stars which have listeners attached so the user can click each star (needs to be this way)

Each star has a data-rating (1-5), and a data-product which jquery selects and adds to the json object.

The only thing I need help with is the actual graphics

When the user selects 4 star, the fourth star is currently coded to toggle a class to appear in a selected state.

When a user selects 4, I want 3, 2 and 1 to also become selected. Equally if they then change their mind and click star 2, I want 4 and 3 to become unselected, and 1 to stay selected.

It would be perfect if there was a way to achieve this in pure CSS using pseudo selectors. If not then jQuery is fine.

Thanks for reading

Upvotes: 0

Views: 427

Answers (3)

yeyene
yeyene

Reputation: 7380

Here is a simple way, DEMO http://jsfiddle.net/yeyene/w9S9P/

JQUERY

$('.star').on('click', function(){
    $('.star').removeClass('selected');
    var count = $(this).attr('name');
    for (var i=0; i<count; i++){        
        $('.star').eq(i).addClass('selected');
    }
});

HTML

<span class="star" name="1">♥</span> 
<span class="star" name="2">♥</span> 
<span class="star" name="3">♥</span> 
<span class="star" name="4">♥</span> 
<span class="star" name="5">♥</span>

CSS

span{font-size:20px;}
.selected{color:red;}

Upvotes: 0

painotpi
painotpi

Reputation: 6996

You can do something like this in pure css,

sample html:

<div data-rating='2'>
    <span class='star two'></span>
</div>

sample css:

.star{
    background: url('your-star-image-url') repeat;   
    height: 128px;
    width: 128px;
    float: left;
}
.two{
    width: 256px;
}

In css you can repeat a background-image and control the star count by manipulating the width

Fiddle

Upvotes: 0

Mandeep Jain
Mandeep Jain

Reputation: 2664

Use Jquery prevAll() to toggle the class of all previous stars :)

Upvotes: 2

Related Questions