如何在jQuery中动态设置进度条的值？

Question

如何在jQuery中动态设置进度条的值？

3

在我的教程网站上，我使用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问题，如果这不可行，我该如何动态设置静态进度条？

提前感谢您。

- AAM111

3个回答

1

虽然这是旧帖子，但这对我有效：

注意：progress标签自html 5以来就被定义了
注意2：您可以通过调整延迟时间来平滑“动画”。

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>

- Leif

1

你的代码似乎没有更新进度条，只是在控制台打印输出。 - AAM111

0

你可以为每个进度条添加一个独特的类，例如pb1、pb2等。

然后只需

$(document).ready(function() {
  $(.pb1).progressbar({
    value: 75
  });
$(.pb2).progressbar({
    value: 50
  });
});

- Sam

谢谢您的回答，但我正在寻找适用于不同HTML文件的可重复使用的东西，其中值可能不同。 - AAM111

在这种情况下，我更喜欢@charlietfl的答案。 - Sam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- charlietfl · Accepted Answer

在使用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>