动态更新进度条

Question

当我的应用程序中的某些点通过时，我如何更新进度条？例如，我正在尝试使用类似的东西：（取自here）

<div class="progress">
    <div class="progress-bar" style="width: 10%">
        10%
    </div>
</div>

然后通过调用更新width

$(".progress-bar").css("width", 30 + "%").text(30 + " %");

或

$(".progress-bar").css("width", 50 + "%").text(50 + " %");

在我的应用程序中调用的其他 javascript 函数中的特定行。例如，当对数据的某些操作完成时，将 width 移动 20% 等...显然这不是正确的方法，因为当一切都完成时，条形图直到最后才移动。

非常感谢任何帮助。万一这很重要，一切都发生在客户端，

Answer 1

有多种方法可以解决这个问题，我建议您更多地将我的方法视为一个起点。但以下是我解决此问题的建议。

$('body').on('click', '.progress', function(event) {
  var w_tar = $(this).find('.progress-bar'),
      w_cur = w_tar.data('width'),
      w_new = w_cur += 10;
	
  if (w_cur > 100) {
    w_new = 10;
  }
  
  w_tar
    .css('width', w_new + "%")
    .data('width', w_new)
    .text(w_new + "%");
});

$('.progress').trigger('click');

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<div class="progress m-5">
  <div class="progress-bar" data-width="0"></div>
</div>

在上面的 sn-p 中，我们将您的内联 style="width: 10%" 替换为 data 属性。这在很大程度上转变为个人观点，但我发现它是一种更可靠的更新元素的方式。在我的示例中，我从“0”开始，因为我强制 jQuery 脚本立即运行一次。

jQuery 本身相当简单，并且实际上只有 3 个变量：

• w_tar 是 .progress-bar 元素
• w_cur 获取data-width 属性的当前值
• w_new 将 w_cur 的值加 10

从那里我们实际上只是在做您在原始代码中已经拥有的东西。我们正在更新内联样式w_tar.css(...)，然后更新data-width，以便我们将来可以更改它.data(...)，最后使用.text(...) 将文本输出到.progress-bar。

在我们进行所有这些更新之前还会进行快速检查，以确保您的进度不会超过 100%。