是否可以更改引导进度条的图像样式？答案

【问题标题】：Is it possible to change the image style of a bootstrap progress bar?是否可以更改引导进度条的图像样式？
【发布时间】：2017-02-09 15:46:10
【问题描述】：

我正在尝试更改引导进度条的样式，并将当前百分比值放入其中。单击按钮可以更改值（宽度），但不能更改背景或文本值。

这是代码。

$(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" />

【问题讨论】：

$(function(){}) 是$(document).ready 的简写形式，因此您已经准备好文档三次。

标签： javascript jquery css twitter-bootstrap

【解决方案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

【讨论】：

【解决方案2】：

您可以创建一个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>

【讨论】：

【解决方案3】：

您必须修改“background-image”css 属性。在您的 HTML 代码中，尝试添加以下内容，例如：

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

【讨论】：