Анимированный список индикаторов выполнения Счетчик учитывает только последние aria-valuenow

Question

В настоящее время я делаю свое собственное онлайн-резюме. Я хотел поставить несколько анимированных индикаторов прогресса для раздела навыков. Я также интегрировал счетчик для отображения анимации процента отсчета для каждого индикатора выполнения, который находится в другом элементе div над каждым соответствующим элементом div class = "progress-bar".

Проблема в том, что когда я пытаюсь установить текст () для счетчика в div выше индикатора выполнения, он показывает подсчитанное значение из атрибута "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 с классом .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;
}

<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>