簡單的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投票計數

回答

相關問題