无法为jQuery UI进度栏分配实际值

Ali Tabibzadeh 发表于 Dev

阿里·塔比扎德（Ali Tabibzadeh）

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。

如何正确指定这些值？我在进度条上有相同的经验（实际上只有一个），并且效果很好。

谢谢你们。

功率

您要做的第一件事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
       });
    });
});

或createProgressBar仅发送this参数即可将代码移至函数中。

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);
    });
});