是否可以更改引導程序進度欄的圖像樣式？

Question

我在嘗試更改引導程序進度欄的樣式，並將當前百分比值放入其中。單擊按鈕可以更改值（寬度），但不會改變背景或文本值。

這是代碼。

$(function() { 
 
    $(document).ready(function() { 
 
    $("#progress-bar1").css("width", "50%"); 
 
    $("#progress-bar1").attr("aria-valuenow", "50%"); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#btnSubmit").click(function() { 
 
    $('#progress-bar1').css("width", "10%"); 
 
    $("#progress-bar1").attr("progress-bar-danger", "10"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-striped active" id="progress-bar1" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
 
    50% 
 
    </div> 
 
</div> 
 
<input id="btnSubmit" type="submit" value="Update" />

Answer 1

您需要添加類progress-bar-danger和更新text至10％： -

$("#btnSubmit").click(function(){ 
    $('#progress-bar1') 
    .addClass('progress-bar-danger') // change to red 
    .css("width", "10%")    // change width to 10% 
    .attr('aria-valuenow', 10)  // change value to 10 
    .text('10%');      // change text to 10% 
}); 

Fiddle

Answer 2

你將不得不修改 「背景圖片」 CSS屬性。在你的HTML代碼，嘗試添加以下爲例：

<style> 
    #progress-bar1{ 
     background-image: none; 
     background-color: green; 
    } 
</style> 

Answer 3

您可以創建一個jQuery插件來設置進度值。

(function($) { 
 
    $.progressArray = ['danger', 'warning', 'info', 'success']; 
 
    $.fn.setProgress = function(percentVal) { 
 
    percentVal = percentVal === 0 ? 0 : percentVal || parseInt(this.attr('aria-valuenow'), 10) || 0; 
 
    percentVal = Math.min(100, Math.max(0, percentVal)); 
 
    var progressIndex = Math.ceil(percentVal/25) - 1; 
 
    return this.css('width', percentVal + '%') 
 
     .attr('aria-valuenow', percentVal) 
 
     .text(percentVal + '%') 
 
     .removeClass($.progressArray.map(cls => 'progress-bar-' + cls).join(' ')) 
 
     .addClass('progress-bar-' + $.progressArray[progressIndex]); 
 
    }; 
 
    $.fn.addProgress = function(percentVal) { 
 
    return this.setProgress((parseInt(this.attr('aria-valuenow'), 10) || 0) + percentVal); 
 
    }; 
 
    $.fn.setTooltipText = function(text) { 
 
    return this.tooltip('hide').attr('data-original-title', text).tooltip('fixTitle'); 
 
    }; 
 
    $.fn.replaceTooltipText = function(regex, repl) { 
 
    return this.setTooltipText(this.attr('data-original-title').replace(regex, repl)); 
 
    }; 
 
})(jQuery); 
 

 
$(function() { 
 
    $('[data-toggle="tooltip"]').tooltip({ placement : 'bottom' }); 
 
    var $progressBar = $("#progress-bar-1").setProgress(); 
 
    $('#btn-decr').on('click', function() { 
 
    $progressBar.addProgress(-parseInt($('#progress-step').val(), 10)); 
 
    }); 
 
    $('#btn-incr').on('click', function() { 
 
    $progressBar.addProgress(parseInt($('#progress-step').val(), 10)); 
 
    }); 
 
    $('#progress-step').on('keyup change', function() { 
 
    var pattern = /\d+(\.\d+)?/g, replacement = $('#progress-step').val(); 
 
    $('#btn-decr').replaceTooltipText(pattern, replacement); 
 
    $('#btn-incr').replaceTooltipText(pattern, replacement); 
 
    }); 
 
});

.tooltip-inner { 
 
    font-size: 1.5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12 col-md-6"> 
 
     <div class="progress"> 
 
     <div class="progress-bar progress-bar-striped active" id="progress-bar-1" role="progressbar" 
 
      aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row align-items-center"> 
 
    <div class="col-sm-5 col-md-2 text-center"> 
 
     <button type="button" class="btn btn-primary" id="btn-decr" 
 
       data-toggle="tooltip" title="Decrease Progress by 25%"> 
 
     <i class="fa fa-arrow-down"></i> % 
 
     </button> 
 
    </div> 
 
    <div class="col-sm-2 col-md-2"> 
 
     <input type="number" class="form-control" id="progress-step" 
 
      min="0" max="100" step="10" data-buttons="true" value="25" /> 
 
    </div> 
 
    <div class="col-sm-5 col-md-2 text-center"> 
 
     <button type="button" class="btn btn-primary" id="btn-incr" 
 
       data-toggle="tooltip" title="Increase Progress by 25%"> 
 
     <i class="fa fa-arrow-up"></i> % 
 
     </button> 
 
    </div> 
 
    </div> 
 
</div>