Question

我忙于处理一些进度条和简单的进度条，但我怎样才能将进度条的值放在HTML中？

我想要的例子：

<span>here the value</span>
<div class="progressbar" value="50"></div>

这是我现在拥有的JS

$("div.progressbar").each(function() {
    var element = this;

    $(element).progressbar({
        value: parseInt($(element).attr("value"))
    });
});

我怎么能让他们成长？（如从0到50）

Answer 1

您可以像这样设置进度条的值：

$（“。progress_”）.progressbar（{ 价值：50 }）;

或者你可以得到这样的值，分钟和最大值：

 var value = parseInt($(".progressbar").attr('value'));
 var min = parseInt($(".progressbar").attr('min'));
 var max = parseInt($(".progressbar").attr('max'));

然后将值设置为progresbar。

例如：

if ( value >= min && value <= max)
{
  $( ".progressbar" ).progressbar({
      value: value
  });
}

对于数字动画，请参阅：Jquery Plugin for animating numbers

Answer 2

这对我有用：

<强> HTML ：

<div class="progressbar" value="20%"></div>

<强>的JavaScript ：

$(".progressbar-count").each(function() {
    $(this).progressbar({
        value: parseInt($(this).attr("value"))
    }), $(".progressbar-count .ui-progressbar-value").animate({
        width: 0
    }, 0).stop().animate({
        width: $(".progressbar-count").attr("value")
    }, 3500)
});

现在我可以在HTML中设置值，并计算到该数字！

Answer 3

为span添加id并使用change事件：

$("div.progressbar").each(function() {
    var element = this;

    $(element).progressbar({
        value: parseInt($(element).attr("value")),
        change: function (e, ui) {
            $("#id_of_your_span").text(ui.value);
        }
    });
});

带有HTML值的Jquery UI进度条

3 个答案: