Невозможно присвоить фактическое значение индикатору прогресса 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
       });
    });
});

Или переместите код на свой 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);
    });
});

РЕДАКТИРОВАТЬ: я обновил оба кода. В первом случае нам нужно использовать this создать правильный индикатор, а не общий селектор.

Во втором случае нам нужно использовать контейнер.

В противном случае мы пытаемся каждый раз заново генерировать все индикаторы выполнения, что вызывает странные эффекты.

Answer 2

Вы устанавливаете pv и pm, передаете это функции, а затем по существу пересчитываете эти значения внутри функции. Я думаю, что вы должны просто избавиться от этих строк:

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