Question

我拼凑了一些代码来构建一个动画百分比栏。当页面上只有一个栏时，一切都很好。我有以下代码

<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);
});

我希望能够在我的页面上放置多个百分比条，但我不确定如何分隔所有不同的值并让每个条形渲染到正确的百分比。

任何人都可以帮助我吗？

Answer 1

您正在使用ID #progress_bar来处理进度条。因为元素ID在DOM中是唯一的，所以当尝试通过它的ID访问元素时，这将导致意外的行为，就像在jQuery选择器上一样。

顶级DIV。

（编辑成对其评论的答案以供将来参考）

您在整个#progress_bar集合中呼叫.progress_bar。解决方案是迭代每个progress_bar并单独为每个元素设置动画。我已经设置了一个jsfiddle来向您展示问题以及如何解决它：jsfiddle.net/4xgzq/1

您应该查看jQuery代码并注释掉警告并取消注释.animateProgress。

顺便说一下，我还在.client_overall_progress之前放置了.progress_bar .ui-progress，以向您展示您在脚本中使用的第一个.animateProgress选择器发生了什么 - 它抓住了整个集的文本他们（这就是为什么第一个alert()向你显示6060）

JQUERY：从具有相同类的div获取不同的值

1 个答案: