在我的教程网站上，我使用的 jQuery UI 进度条不是作为会改变的进度条，而是作为要显示的图像来向用户显示他们完成教程的进度。例子：
$(document).ready(function() {
$(.progressbar).progressbar({
value: 50
});
});<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>
<body>
Lots of stuff here
<div class="progressbar"></div>
<span style="text-align: center">50% complete</span>
Lots more stuff here
</body>然而，我想让它做的是有多个不同值的进度条。我想为进度条创建一个类，并为它的值创建一个自定义属性。像这样的东西：
$(document).ready(function() {
$(.progressbar).progressbar({
value: $(.progressbar).attr("data-progress-value");
});
});<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>
<body>
Lots of stuff here
<div class="progressbar" data-progress-value="33"></div>
<span style="text-align: center">33% complete</span> Lots more stuff here
<div class="progressbar" data-progress-value="67"></div>
<span style="text-align: center">67% complete</span> More stuff here
<div class="progressbar" data-progress-value="90"></div>
<span style="text-align: center">90% complete</span>
</body>我知道这段代码不会起作用，因为 jQuery 文档说 .attr 和所有类似的函数只获取集合中第一个的属性。
在 jQuery 中有这样的可能吗？
或者，对于这里显示的XY问题，如果这不可能，我如何动态设置静态进度条？
提前谢谢你。
在
each()$(function() {
$('.progressbar').each(function() {
var $el = $(this);
$el.progressbar({
value: $el.data("progress-value")
});
});
})<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
Lots of stuff here
<div class="progressbar" data-progress-value="33"></div>
<span style="text-align: center">33% complete</span> Lots more stuff here
<div class="progressbar" data-progress-value="67"></div>
<span style="text-align: center">67% complete</span> More stuff here
<div class="progressbar" data-progress-value="90"></div>
<span style="text-align: center">90% complete</span>您可以为每个进度条添加一个唯一的附加类，如 pb1、pb2 等
然后只是
$(document).ready(function() {
$(.pb1).progressbar({
value: 75
});
$(.pb2).progressbar({
value: 50
});
});
旧帖子 ik 但这对我有用：
let progress = 0;
let timeoutSec = 10;
/**
* This will update indefinetly and will run "yourRepeatetUpdate()" func every "10" sec
* Time progress is displayed every update in <progress id="progressTillUpdate" ...></progress> html elem
*/
setInterval(
(function () {
console.log("Progress: " + progress + "/" + timeoutSec)
document.getElementById("progressTillUpdate").max = timeoutSec;
document.getElementById("progressTillUpdate").value = progress; // Does not update for some reason
if (progress == timeoutSec) {yourRepeatetUpdate()}
progress = (progress < timeoutSec) ? progress + 1 : 0; // Loop after timeoutSec
}), 1*1000); // Updates every second
async function yourRepeatetUpdate() {
/*code*/
};<style>
progress {
animation-duration: 1s;
}
</style>
<progress id="progressTillUpdate" value="0" max="100" style="width: 100%;height:20px;">
Progress bar
</progress>