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

uplii1fm 于 2023-05-06 发布在 jQuery

关注(0)|答案(3)|浏览(173)

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

jquery

来源：https://stackoverflow.com/questions/45399854/how-to-dynamically-set-progress-bar-value-in-jquery

3条答案

按热度按时间

um6iljoc1#

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

赞(0）回复(0）举报 2023-05-06

bihw5rsg2#

老帖子ik，但这是什么是为我工作：

注意：progress标签是从html5开始定义的
注意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>

赞(0）回复(0）举报 2023-05-06

inn6fuwd3#

您可以为每个进度条添加一个唯一的额外类，如pb1，pb2等。
那就

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

赞(0）回复(0）举报 2023-05-06

我来回答

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

3条答案

相关问题

热门标签

最新问答