jQuery: как создать ProgressBar из заданной разметки

Поэтому я использую плагин ProgressBar JQuery (http://t.wits.sg/misc/jQueryProgressBar/demo.php), чтобы создать несколько статических индикаторов выполнения.

Чего я хочу добиться, так это из этой разметки:

<span class="progress-bar">10 / 100</span>

создать индикатор выполнения с максимальным значением 100 и текущим значением 10. Я использую метод html() для получения содержимого диапазона, а затем split() для получения двух чисел:

$(document).ready(function() {
    $(".progress-bar").progressBar($(this).html().split(' / ')[0], {
        max: $(this).html().split(' / ')[1],
        textFormat: 'fraction'
    });
});

Это не работает, есть предложения?

Я почти уверен, что проблема связана с $(this).html().split(' / ')[0] и $(this).html().split(' / ')[1], это правильный синтаксис?


javascript plugins jquery progress-bar
person Richard Knop    schedule 16.07.2009    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуй это:

$(document).ready(function() {
    $(".progress-bar").each(function(){
        values = $(this).html().split(' / ');
        $(this).progressBar(values[0], {
        max: values[1],
        textFormat: 'fraction'
        })
    });
});

Нет ничего плохого в использовании переменной для разделения. Это фактически экономит ваши звонки.

person YiSh    schedule 16.07.2009
comment
Спасибо, я только что заметил, что вышеупомянутое решение работает только для одного тега span. - person Richard Knop; 16.07.2009

arrow_upward
1
arrow_downward

как насчет:

$(document).ready(function() {
    var pb = $(".progress-bar")[0].innerHTML.split(" / ");

    $(".progress-bar").progressBar(pb[0], {
        max: pb[1],
        textFormat: 'fraction'
    });
});

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

person mkoryak    schedule 16.07.2009
comment
Это работает. Спасибо :) Интересно, почему моя версия не работает. - person Richard Knop; 16.07.2009
comment
Это не будет работать более чем для одного интервала, и, поскольку Ричард использует индикатор выполнения класса, может быть несколько экземпляров. - person YiSh; 16.07.2009
comment
Ричард, ваш пример не сработал, поскольку $(this) находится в неправильном контексте. - person YiSh; 16.07.2009