简单的jquery投票计数

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

我的代码 - 我真的不希望它在点击增加，但我只是提供此作为参考：

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的实现取决于投票数正确的钢筋长度。

来源

2011-10-03 webbydevy

也许这将是更好的有5个不同的图像作为酒吧的长度。 PNG的支持透明度和跨浏览器兼容。这是更容易的途径。 –

好的，谢谢。我将如何加载每个页面加载正确的酒吧长度？ – webbydevy

在你的例子中，如果你有296五星级的选票，你想要你的div有多宽？ –

会是这样的工作：

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

我带着刺

如果你使用jQuery，你可以使用类似修改<img>标签的src属性在Ruby代码中，因为我不知道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 %>

来源

2011-10-04 02:20:46 b01

完美。谢谢！！ – webbydevy

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

PNG的支持透明度和跨浏览器兼容。与CSS相比，这是更容易的途径。

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

来源

2011-10-03 23:49:16

简单的jquery投票计数

回答

相关问题