引导-进度条jQuery插件
引导-进度条jQuery插件
提问于 2014-01-02 14:53:30
我遇到了一个用于引导进度条的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
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-02 15:09:09
$('#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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20885552
复制相关文章
相似问题
腾讯云开发者
