简单的jquery投票计数

Question

我正在开发一个Rails应用程序，需要根据数字在投票列表上自动增加一个非常简单的线条。

我的代码 - 我实际上并不希望它在点击时增加，但我只是提供它作为参考：

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样式：

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

所需结果示例：

---

5星：xxxxxxxxxx（296）
4星级：xxx（28）
3星：x（15）
2星：x（16）
1星级：xxxxx（111）

---

我只需要帮助jQuery来实现正确的条形长度，具体取决于投票号。

Answer 1

这样的事情会起作用吗？

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

我对红宝石代码进行了尝试，因为我不认识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 %>

Answer 2

也许最好有5个不同的图像代表每个不同的条形长度。

PNG支持透明度，并且符合跨浏览器标准。与CSS相比，这是更容易的路径。

如果您使用的是jQuery，则可以使用以下内容修改src标记的<img>属性：

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