Jquery 多个循环进度条的问题

我使用中的代码制作了一个循环进度条，它工作得很好，直到我添加了第二个进度条。我不知道如何更改进度条中每个进度条的百分比-有人能帮我怎么做吗？（：

---

jsfiddle.net/pw87wpyh/1

您的小提琴有两个id为进度条的元素。但是html元素的id必须是唯一的。这就是为什么两者都变为80%。更改第二个进度条的id，然后相应地更改javascript代码

在你的小提琴中尝试了这一点，不得不再做一些更改，并添加了几个ID：

HTML代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="bar_container">
<div id="main_container">
<div id="pbar" class="progress-pie-chart" data-percent="0">
<div class="ppc-progress">
<div class="ppc-progress-fill" id="progress-fill"></div>
</div>
<div class="ppc-percents" id="ppc-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div>

<progress style="display: none" id="progress_bar" value="0" max="80"></progress>
</div>
</div>



<div class="bar_container">
<div id="main_container">
<div id="pbar2" class="progress-pie-chart" data-percent="0">
<div class="ppc-progress">
<div class="ppc-progress-fill" id="progress-fill2"></div>
</div>
<div class="ppc-percents" id="ppc-percents2">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div>

<progress style="display: none" id="progress_bar2" value="0" max="20"></progress>
</div>
</div>

%
%

和javascript：

$(document).ready(function() {
var progressbar = $('#progress_bar');
max = progressbar.attr('max');
time = (1000 / max) * 5;
value = progressbar.val();

var progressbar2 = $('#progress_bar2');
max2 = progressbar2.attr('max');
time2 = (1000 / max2) * 5;
value2 = progressbar2.val();

var loading = function() {
if (value < max) {
value += 1;
addValue = progressbar.val(value);
}
if (value2 < max2) {
value2 += 1;
addValue2 = progressbar2.val(value2);
}

$('#progress_bar').html(value + '%');
$('#progress_bar2').html(value2 + '%');

var $ppc = $('#pbar'),
deg = 360 * value / 100;
if (value > 50) {
$ppc.addClass('gt-50');
}

var $ppc2 = $('#pbar2'),
deg2 = 360 * value2 / 100;
if (value2 > 50) {
$ppc2.addClass('gt-50');
}

$('#progress-fill').css('transform', 'rotate(' + deg + 'deg)');
$('#progress-fill2').css('transform', 'rotate(' + deg2 + 'deg)');

$('#ppc-percents span').html(value + '%');
$('#ppc-percents2 span').html(value2 + '%');

if (value == max) {
clearInterval(animate);
}
};

var animate = setInterval(function() {
loading();
}, time);
});

$（文档）.ready（函数（）{
var progressbar=$（“#进度条”）；
max=progressbar.attr（'max'）；
时间=（1000/最大值）*5；
value=progressbar.val（）；
var progressbar2=$（“#progress_bar2”）；
max2=progressbar2.attr（'max'）；
time2=（1000/max2）*5；
value2=progressbar2.val（）；
var加载=函数（）{
如果（值<最大值）{
数值+=1；
addValue=progressbar.val（值）；
}
如果（值2<最大值2）{
值2+=1；
addValue2=progressbar2.val（value2）；
}
$（'#进度条'）.html（值+'%'）；
$（'#progress_bar2'）.html（value2+'%'）；
变量$ppc=$（“#pbar”），
度=360*值/100；
如果（值>50）{
$ppc.addClass（'gt-50'）；
}
变量$ppc2=$（“#pbar2”），
deg2=360*值2/100；
如果（值2>50）{
$ppc2.addClass（'gt-50'）；
}
$（“#进度填充”）.css（'transform'、'rotate（'deg+'deg'））；
$（'#progress-fill2'）.css（'transform'，'rotate（'+deg2+'deg'））；
$（'#ppc percents span'）.html（值+'%'）；
$（'#ppc-percents2 span'）.html（value2+'%'）；
如果（值==最大值）{
clearInterval（动画）；
}
};
var animate=setInterval（函数（）{
加载（）；
}，时间）；
});

---

根据需要更改样式。

请给我们一些代码。我使用的所有代码都在我发布的链接上您的代码-而不是一些博客条目链接-这是我所有的，只有一个进度条，它似乎可以工作。那么代码的问题出在哪里呢！-我知道您在多个进度条上有问题。但是如果我开始放置mult我把进度条放在一个页面上，它就工作了，这对你的工作没有帮助，对吧？所以请给我们看你的代码，它不工作。