JQUERY：與同等級

我曾經拼湊一些代碼來構建一個動畫的百分比從酒吧的div得到不同的值。當一頁上只有一個欄時，一切都很好。我有以下代碼JQUERY：與同等級

<div id="progress_bar" class="ui-progress-bar ui-container"> 
<div class="ui-progress" style="width: 60%;"> 
<span class="ui-label" style="display:none;"><b class="value"><span class="client_overall_progress">60</span>%</b></span> 
</div> 
</div> 


$(function() { 
var overall_progress = $(".client_overall_progress", this) .text(); 

// Hide the label at start 
$('#progress_bar .ui-progress .ui-label').hide(); 
// Set initial value 
$('#progress_bar .ui-progress').css('width', '7%'); 

// Simulate some progress 
$('#progress_bar .ui-progress').animateProgress(overall_progress); 
});

我希望能夠將多個％的酒吧我的網頁上，但我不知道如何分離所有的不同的價值觀，讓每個條渲染到正確的百分比。

誰能幫助我嗎？

來源

2011-06-09 Mark

你正在處理你的進度條與#progress_bar的ID。因爲元素ID在DOM中被假定爲唯一的，所以當試圖通過它的ID到達元素時會導致意外的行爲，就像你在jQuery選擇器上做的那樣。

什麼你可以做的，就是改變#progress_bar爲.progress_bar，並代替與progress_bar的ID定義它，將其添加爲另一個類到頂部DIV。

（編輯成從以備將來參考它的評論答案）

您正在呼籲一整套.client_overall_progress.animateProgress。解決方案是迭代每個.progress_bar .ui-progress並單獨爲每個元素設置動畫。我已經設置了一個jsfiddle向您展示問題以及如何修復它：jsfiddle.net/4xgzq/1

您應該只查看jQuery代碼並註釋掉警報並取消註釋.animateProgress。

順便說一句，我還放着一個alert()的.each()之前，向你展示了什麼事與你在你的腳本中使用的第一client_overall_progress選擇 - 它抓住了一整套他們的文字。（這就是爲什麼第一alert()顯示你6060）

來源

2011-06-09 09:43:15

您好，感謝您的信息。我本應該注意到這個小錯誤。發生的事情是，.client_overall_progress的價值在於它將價值聯繫在了一起。所以如果2個酒吧在60％，我得到2個酒吧6060％，如果你知道我的意思 – Mark 2011-06-09 09:47:59

是的，我明白你的意思。這是因爲你在整個'.client_overall_progress'集合上調用'.animateProgress'。解決方案是迭代每個'.progress_bar .ui-progress'並分別爲每個元素設置動畫。我已經建立了一個的jsfiddle向您展示問題，以及如何解決它： http://jsfiddle.net/4xgzq/1/ 你應該只是看看jQuery代碼並註釋掉警報並取消了' .animateProgress'。 – 2011-06-09 09:56:23

順便說一句，我還放着一個'警報（）''的。每個前（）'，向您展示了什麼事與你在你的腳本中使用的第一個'client_overall_progress'選擇 - 它抓住了一整套他們的文字。（這就是爲什麼第一個'alert（）'顯示你6060） – 2011-06-09 09:57:54

JQUERY：與同等級

回答

相關問題