Simple jquery vote count

I am developing a Rails app and need to automatically increment a very simple line bar on a voting list base开发者_如何学编程d on a number.

My code - I don't actually want it to increment on click, but am just providing this as reference:

jQuery:   
$j(".starStats div").click(function() {
 $j(this).parent().animate({
     width: '+=100px'
        }, 500);
            $j(this).prev().html(parseInt($j(this).prev().html()) + 1);
                return false;
});

HTML:

<% (1..5).to_a.reverse.each do |n| %>
<tr class="starStats">
    <td><strong><%= n %> star</strong><span><%= vote.rate_summary ? vote.rate_summary[n].to_i : 0 %></span> <div>&nbsp;</div></td>
<td>(<%= vote.rate_summary ? vote.rate_summary[n].to_i : 0 %>)</td>
</tr>
<% end %>

CSS styling:

.starStats div {  background: #fbbf55; float: right; margin-right: 5px;width: 90px;  }
.starStats span { display: none; } 

5 star: xxxxxxxxxx (296)

4 star: xxx (28)

3 star: x (15)

2 star: x (16)

1 star: xxxxx (111)

I just need help with the jQuery to implement the correct bar length depending on the voting number.

Would something like this work:

http://jsfiddle.net/khalifah/HGzqB/

I took a stab at the ruby code, since I don't know Ruby.

JavaScript:

jQuery:
$j( ".starStats" ).each(function()
{
    var totalVotes = parseInt( $j(".total-votes").text() ),
        votes = parseInt( $j(this).find(".votes .number").text() );
    $j( this ).find( ".percent" ).animate({
        width: '+=' + ( votes / totalVotes) * 100
    }, 500);
});

HTML:

<% (1..5).to_a.reverse.each do |n| %>
    <tr class="starStats">
        <td><strong><%= n %> star</strong></td>
        <td class="bar"><div class="percent"></div></td>
        <td class="votes">(<span class="number"><%= vote.rate_summary ? vote.rate_summary[n].to_i : 0 %></span>)</td>
    </tr>
<% end %>

Maybe it would be better to have 5 different images representing each different bar length.

PNG's support transparency and are cross browser compliant. It's the easier path compared to CSS.

If you're using jQuery you can modify the src attribute of an <img> tag using something like:

<!-- You're loading a brand new page. No Reviews as of yet. -->
<img class="fivestar" src="path/to/empty.jpg" alt="no reviews yet" />


<!-- Load the appropriate CSS class to whatever object has a Five Star review -->
$(".fivestar").attr("src", "path/to/fivestarbar.png");