admin管理员组

文章数量:1336632

On my tutorial website, I'm using jQuery UI progress bars not as bars that will change, but as images to display to show the user how far they are through the tutorial. Example:

$(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% plete</span>
  Lots more stuff here
</body>

On my tutorial website, I'm using jQuery UI progress bars not as bars that will change, but as images to display to show the user how far they are through the tutorial. Example:

$(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% plete</span>
  Lots more stuff here
</body>

However, what I want it to do is have multiple progress bars with different values. I want to have a class for the progress bars, and a custom attribute for its value. Something like this:

$(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% plete</span> Lots more stuff here
  <div class="progressbar" data-progress-value="67"></div>
  <span style="text-align: center">67% plete</span> More stuff here
  <div class="progressbar" data-progress-value="90"></div>
  <span style="text-align: center">90% plete</span>
</body>

I know this code won't work though, because the jQuery docs say .attr and all similar functions only get the attribute of the first of the set.

Is something like this possible in jQuery?

Or, for the XY problem showing here, If this is not possible, how can I dynamically set static progress bars?

Thank you in advance.

  • javascript
  • jquery
  • jquery-ui
  • progress-bar
Share Improve this question asked Jul 30, 2017 at 12:31 AAM111AAM111 1,2393 gold badges21 silver badges44 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

Fairly simple in an each() where you have access to each element instance before initializing plugin for that element.

$(function() {
  $('.progressbar').each(function() {
    var $el = $(this);
    $el.progressbar({
      value: $el.data("progress-value")
    });
  });
})
<link rel="stylesheet" href="//cdnjs.cloudflare./ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />

<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare./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% plete</span> Lots more stuff here
<div class="progressbar" data-progress-value="67"></div>
<span style="text-align: center">67% plete</span> More stuff here
<div class="progressbar" data-progress-value="90"></div>
<span style="text-align: center">90% plete</span>

Old post ik but this is what is working for me:

  • NOTE: progress tag is defined since html 5
  • NOTE2: You can smooth out the "animation" by tweaking the delay times.

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>

You could add an additional class unique to each progress bar, like pb1, pb2 etc.

Then just 

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

本文标签： javascriptHow to dynamically set progress bar value in jQueryStack Overflow

版权声明：本文标题：javascript - How to dynamically set progress bar value in jQuery? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742412377a2470041.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。