jquery - 无法为 jQuery UI 进度条分配实际值

Question

我对 jQuery UI 进度条有疑问。我的页面上有多个进度条(用于指示多步进度的堆叠进度条)并且我有以下代码来启动进度条并分配值:

function createProgressBars(progressVal, progressValMax, callback) {

progressVal = $(this).data("progress-value");
progressValMax = $(this).data("progress-val-max");

$(".progress-bar").progressbar({
    value : progressVal,
    max : progressValMax
});

callback();}
jQuery(function($){
$(document).ready(function(){

    $(".progress-bar").each(function(){
        var pv = $(this).data("progress-value"),
            pm = $(this).data("progress-max");

        createProgressBars(pv, pm);
    });
});
});

编辑:添加 HTML 代码

<div class="progress-bar regular-user" data-progress-value="1000" data-progress-max="3000"></div>

<div class="progress-bar bronze-user" data-progress-value="500" data-progress-max="2000"></div>

<div class="progress-bar silver-user" data-progress-value="300" data-progress-max="2000"></div>

<div class="progress-bar gold-user" data-progress-value="200" data-progress-max="3000"></div>

但是在 HTML 属性中我有 aria-value-max=100 和 aria-value-now=0 。

如何正确指定这些值？我对进度条(实际上是一个进度条)有同样的经历，而且效果很好。

谢谢你们。

Answer 1

您在 createPogressBar 中做的第一件事是用 this 覆盖这两个参数，此时它没有指向任何东西。 你可能会这样做:

jQuery(function($){
$(document).ready(function(){

    $(".progress-bar").each(function(){
        var pv = $(this).data("progress-value"),
            pm = $(this).data("progress-max");

       $(this).progressbar({
          value : pv,
          max : pm
       });
    });
});

或者通过仅发送 this 参数将代码移动到您的 createProgressBar 函数。

function createProgressBars(container, callback) {

progressVal = $(container).data("progress-value");
progressValMax = $(container).data("progress-val-max");

$(container).progressbar({
    value : progressVal,
    max : progressValMax
});

callback();}
jQuery(function($){
$(document).ready(function(){

    $(".progress-bar").each(function(){
        createProgressBars(this);
    });
});

编辑: 我更新了两个代码。在第一种情况下，我们需要使用 this 来创建正确的进度条，而不是通用选择器。

在第二种情况下，我们需要使用容器。

不这样做会尝试每次都重新生成所有进度条，这会导致奇怪的效果。