引导进度条 jQuery 插件

Question

我在使用用于引导进度条的 jQuery 插件时遇到了一些问题 - http://minddust.github.io/bootstrap-progressbar/bootstrap-2.3.2.html

我想根据所选选项向用户提供进度条的预览。我面临的问题是.progressbar({...}) 仅记录选项的第一次更改，而不是之后的更改。这些值不会在后续更改中更改。

如果我选择选项"percentage"，则栏上的文本显示为"40%"，如果我选择"amount"，则栏上的文本显示为"40/100"。

所以这里的问题是，如果我首先选择 "percentage" 选项然后更改为 "amount" 仍然在按钮单击上，我看到显示的是百分比而不是数量。

我在 jQuery 代码中缺少什么？

HTML -

<div id="demo-progress-bar" class="progress">
    <div class="bar" aria-valuetransitiongoal="40">
        <span style="margin:0 10px;"></span>
    </div>
</div>

<a id="progress-bars-preview" href="#">Click to Preview</a>

<select id="progress_bar-percent" name="progress_bar-percent">
    <option value="percentage">Percentage</option>
    <option value="amount">Amount</option>
</select>

jQuery -

$('#progress-bars-preview').click(function(){
    var percent = $('#progress_bar-percent').val();
    if(percent=="percentage"){
        percent = true;
    }else{
        percent = false;
    }
    $("#demo-progress-bar .bar").progressbar({
        display_text: "fill",
        done: function(current_percentage) {
            $("#demo-progress-bar .bar span").show("slow");
        },
        use_percentage: percent
    });
});

Answer 1

$('#progress-bars-preview').click(function(){
    var randomValue = Math.floor(Math.random() * (100 - 10 + 1) + 10);
    var element = $("#demo-progress-bar").html();
    $("#demo-progress-bar").html("").html(element);
    $("#demo-progress-bar .bar").attr('aria-valuetransitiongoal',randomValue);
    var percent = $('#progress_bar-percent').val();
    if(percent=="percentage"){
        percent = true;
    }else{
        percent = false;
    }
    $("#demo-progress-bar .bar").progressbar({
        display_text: "fill",
        done: function(current_percentage) {
            $("#demo-progress-bar .bar span").show("slow");
        },
        use_percentage: percent
    });
});

http://jsfiddle.net/Lcp9A/3/