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/

bootstrap-progressbar jQuery插件

1 个答案: