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

Question

我现在正在做我自己的在线简历。我想在技能部分设置几个动画进度条。我还集成了一个计数器来显示每个进度条的计数百分比动画，它位于每个相应的div class=“进度条”上方的另一个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));

正在使用类.progressbar-number更新所有divs的text。

更新示例：

​

$(".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;
}

<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="progress-wrapper">
  <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="progress-wrapper">
  <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="progress-wrapper">
  <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>

​