Momentjs结合progressbar多实例不生效，如何让all-timer按起止时间生成独立进度条

问题原因 #

你代码的问题主要有两个：

• 第一，HTML里重复使用了相同的ID pg-bar，ID在整个HTML文档里必须是唯一的，你用$('#pg-bar .progress-bar')选择的时候，浏览器只会返回找到的第一个匹配的元素，所以所有进度计算结果都只会更新到第一个进度条上。
• 第二，你的JS代码没有遍历每个.all-timer元素，页面加载的时候只执行了一次计算逻辑，取的就是第一个.all-timer里的起止时间，自然不会给另外两个div单独计算进度。

修正后的代码 #

HTML调整 #

把所有进度条的id="pg-bar"删掉或者改成class即可，保持结构如下：

<div class="all-timer">
    <div class="start_timer">00:00</div>
    <div class="end_timer">23:50</div>
    <div class="progress pg-bar">
      <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="all-timer">
    <div class="start_timer">1:00</div>
    <div class="end_timer">20:50</div>
    <div class="progress pg-bar">
      <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="all-timer">
    <div class="start_timer">2:00</div>
    <div class="end_timer">21:50</div>
    <div class="progress pg-bar">
      <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>

JS调整 #

遍历所有.all-timer元素，每个元素单独执行时间计算和进度更新逻辑，单独绑定自己的进度条元素：

$(document).ready(function(){
  // 遍历每个all-timer容器
  $('.all-timer').each(function(){
    // 取当前容器下的起止时间
    const $this = $(this)
    const start_time = $this.find('.start_timer').text()
    const end_time = $this.find('.end_timer').text()
    const start = moment(start_time, 'H:mm')
    const end = moment(end_time, 'H:mm')
    // 定位当前容器内的进度条，不影响其他容器
    const $progressBar = $this.find('.pg-bar .progress-bar')
    let formattedPercentage = 0

    const interval = setInterval(function(){
      const now = moment()
      const percentage = now.diff(start) / end.diff(start) * 100

      if (percentage > 100) {
        formattedPercentage = 100
        clearInterval(interval)
      } else if(percentage < 0) {
        // 边界处理，还没到开始时间的时候进度为0
        formattedPercentage = 0
      } else {
        formattedPercentage = percentage.toFixed(2)
      }
      // 只更新当前容器的进度条
      $progressBar.width(formattedPercentage+'%').html(formattedPercentage+'%')
    }, 500)
  })
})

内容的提问来源于stack exchange，提问作者Kobbe