更新示例：

Question

我目前正在做自己的在线简历。我想在技能部分添加几个动画进度栏。我还集成了一个计数器，以显示每个进度条的计数百分比的动画，该进度条位于每个相应的div class =“ progress-bar”上方的另一个div中。

问题是当我尝试在进度条上方的div中为计数器设置text（）时，它显示了来自最后一个进度条的“ aria-valuenow”属性的计数值。

$(".progress-bar").each(function(i) {
  $(this).animate({
    width: $(this).attr('aria-valuenow') + '%'
  });

  $(this).prop('Counter', 0).animate({
    Counter: $(this).attr('aria-valuenow')
  }, {
    duration: 3000,
    step: function(now) {
      $(".progressbar-number").text(Math.ceil(now));
    }
  });
});

.pt-4 {
  padding-top: 1.5rem !important;
}

.progress_elements {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.progress_elements>div {
  flex: 0 0 100%;
  max-width: 100%;
  padding-bottom: 1rem !important;
}

.title-wrap {
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.progressbar-title {
  color: #000;
  font-size: 1rem;
}

.progressbar-title p {
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.progress_value {
  position: relative;
  color: #000;
  font-size: 1rem;
}

.progressbar-number {
  display: inline-block;
}

.progress {
  width: 100%;
  height: 5px;
  border-radius: 0;
}

.progress-bar {
  height: 5px;
  background-color: #2ecc71;
  -webkit-transition: width 5s ease;
  -moz-transition: width 5s ease;
  -o-transition: width 5s ease;
  transition: width 5s ease;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="progress1">
  <div class="title-wrap">
    <div class="progressbar-title">
      <p>
        PHP & MYSQL
      </p>
    </div>
    <div class="progress_value">
      <div class="progressbar-number"></div>
      <span>%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-1" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

<div class="progress2">
  <div class="title-wrap">
    <div class="progressbar-title">
      <p>
        HTML5 & CSS3
      </p>
    </div>
    <div class="progress_value">
      <div class="progressbar-number"></div>
      <span>%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-2" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

<div class="progress3">
  <div class="title-wrap">
    <div class="progressbar-title">
      <p>
        WORDPRESS
      </p>
    </div>
    <div class="progress_value">
      <div class="progressbar-number"></div>
      <span>%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-3" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

Answer 1

一种解决方案是在包含进度条的主div中添加一个通用类（在下一个示例中，它称为progress-wrapper）。现在，在此之后，您需要使用下一个代码来更新% text的值：

step: function(now)
{
  $(this).closest(".progress-wrapper")
      .find(".progressbar-number")
      .text(Math.ceil(now));
}

对于每个进度条，先前的代码找到了他的包装器，然后使用find()获取相关的.progressbar-number div进行更新。与您的代码的不同之处在于下一个逻辑：

$(".progressbar-number").text(Math.ceil(now));

正在使用类text更新所有divs的{{1}}。

更新示例：

.progressbar-number

$(".progress-bar").each(function(i)
{
  $(this).animate({
    width: $(this).attr('aria-valuenow') + '%'
  });

  $(this).prop('Counter', 0).animate({
    Counter: $(this).attr('aria-valuenow')
  }, {
    duration: 3000,
    step: function(now)
    {
      $(this).closest(".progress-wrapper")
          .find(".progressbar-number")
          .text(Math.ceil(now));
    }
  });
});

.pt-4 {
  padding-top: 1.5rem !important;
}

.progress_elements {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.progress_elements>div {
  flex: 0 0 100%;
  max-width: 100%;
  padding-bottom: 1rem !important;
}

.title-wrap {
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.progressbar-title {
  color: #000;
  font-size: 1rem;
}

.progressbar-title p {
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.progress_value {
  position: relative;
  color: #000;
  font-size: 1rem;
}

.progressbar-number {
  display: inline-block;
}

.progress {
  width: 100%;
  height: 5px;
  border-radius: 0;
}

.progress-bar {
  height: 5px;
  background-color: #2ecc71;
  -webkit-transition: width 5s ease;
  -moz-transition: width 5s ease;
  -o-transition: width 5s ease;
  transition: width 5s ease;
}

动画进度栏列表计数器仅计算最后一个aria-valuenow

1 个答案:

更新示例：