所有圆圈计数器显示相同的数据（如何让每个圆圈显示它自己的计数器数据值）

Question

hwllo 我希望我的圆形计数器显示我在他们的 class 和 data-percent 中提到的计数器值但目前所有 4 个计数器都只显示第一个计数器的数据，但是我在其 html 代码中提到了每个计数器的数据百分比值。请帮我弄清楚出了什么问题，我应该怎么做才能使其正确？感谢任何帮助，并提供代码以便清楚理解：

下面使用的代码显示了如图所示的结果：

目前我正在使用这个 js 代码片段

<script type="text/javascript">
  (function () {
  var bar, c, percent, r, range;

  percent = $('.pie').data('percent');

  bar = $('.pie').find('.bar');

  r = bar.attr('r');

  c = Math.PI * (r * 2);

  range = (100 - percent) / 100 * c;

  bar.css({
    'stroke-dashoffset': c,
    'stroke-dasharray': c });


  bar.animate({
    strokeDashoffset: range },
  1000, 'linear');

  $('.text').prop('Counter', 0).animate({
    Counter: percent },
  {
    duration: 1000,
    step: function (now) {
      return $(this).text(Math.ceil(now) + '%');
    } });


}).call(this);
</script>

和html是这样的：

<!--counter new -->
<div class="container-fluid counter"> 
  <div class="row">
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="99">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="32">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="44">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="22">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
</div>
</div>
<!--counter new end -->

使用的css也如下图：


.svg-box {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 3em;
  letter-spacing: 3px;
  font-family: "Raleway", Calibri, sans-serif;
  color: #fff
}

svg {
  transform: rotate(-90deg);
  width: 200px;
  height: 200px;
  background: transparent;
  fill: none;
}
svg circle {
  stroke-width: 1;
  stroke: #999;
}
svg .bar {
  stroke-width: 3;
  stroke: #ffffff;
  stroke-linecap: round;
}

我想通过显示

来显示计数器

"data-percent" vale

我在 html 代码中提到过。但所有计数器都显示第一个计数器的数据值。

我想显示的内容 data 是这样的：

Answer 1

我重新设计了一些您的代码，我认为它应该可以正常工作。

(function () {

 $('.pie').each(function(){

 let percent = $(this).data('percent');
 let bar = $(this).find('.bar');
 let r = bar.attr('r');
 let c = Math.PI * (r * 2);
 let range = (100 - percent) / 100 * c;
 bar.css({
  'stroke-dashoffset': c,
  'stroke-dasharray': c 
 });
 bar.animate({ strokeDashoffset: range }, 1000, 'linear');

$(this).prev().prop('Counter', 0).animate({ 
    Counter: percent 
  },                                 {
    duration: 1000,
    step: function (now) {
      return $(this).text(Math.ceil(now) + '%');
    }
  });  
 })
}).call(this);

这是一个有效的 fiddle：https://jsfiddle.net/w2o7rt1L/

所有圆圈计数器显示相同的数据（如何让每个圆圈显示它自己的计数器数据值）

All circle counter showing same data (how to make each circle show it's own counter data value)

html

javascript

css

counter