Question

在我的教程网站上，我使用的是jQuery UI进度条而不是可以更改的条形图，但是作为要显示的图像，向用户显示它们在教程中的位置。例如：

＆＃13;

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

＆＃13;

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

＆＃13;

但是，我想要它做的是有多个具有不同值的进度条。我希望有一个进度条的类，以及它的值的自定义属性。像这样：

＆＃13;

$(document).ready(function() {
  $(.progressbar).progressbar({
    value: $(.progressbar).attr("data-progress-value");
  });
});

＆＃13;

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

＆＃13;

我知道这段代码不会起作用，因为jQuery文档说.attr和所有类似的函数只获得第一个集合的属性。

在jQuery中是否可以这样？

或者，对于此处显示的XY问题，如果无法做到这一点，我该如何动态设置静态进度条？

提前谢谢。

Answer 1

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

Answer 2

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

然后只是

fetchAll()

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

2 个答案: