无法分配实际值到jQuery UI进度条

我有一个jQuery UI进度条的问题。我有我的页面上有多个进度条（用于指示一个多步骤的进展堆叠进度条），我有以下代码来启动进度条和赋值：无法分配实际值到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。

如何正确指定这些值？我有一个进度条（实际上只有一个）的相同经验，它工作得很好。

谢谢你们。

来源

2013-12-20 Ali Tabibzadeh

显示html以及.. – zzlalani

@zzlalani编辑。 –

您在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功能。编辑：我更新了两个代码。在第一种情况下，我们需要使用this来创建正确的进度条，而不是通用选择器。

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

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

来源

2013-12-20 11:31:04 jaudette

这是我的编辑版本的代码，现在有问题确定哪个'data-progress-value'和'data-progress-max'属于某个元素。它的表现很奇怪，我希望每个进度条中的每个'data- *'属性都能影响特定的进度条。问题在哪里？谢啦。 –

@AliTabibzadeh看到我更新的代码，现在修复了问题。 – jaudette

你正在设置PV和PM，将其传递给函数，然后重新计算函数内的这些值。我认为你应该摆脱这些线：

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

来源

2013-12-20 11:31:11 geert3

无法分配实际值到jQuery UI进度条

回答

相关问题