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：与同等级

回答

相关问题