javascript - 为数字计数器添加不同的后缀

Question

我正在页面上显示一些统计数据。当您向下滚动页面时，数字会呈现动画。

某些统计数据需要在数字后添加“+”或“%”。我似乎只能将相同的字符应用于所有计数器，但需要使用“+”、“%”或根本不指定特定字符。所以我的问题是如何针对具有特定后缀的特定计数器？

下面是我用于四个不带后缀的计数器的代码。我可以为此添加一些额外的代码吗？我对编码很陌生，因此我们将不胜感激!

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var a = 0;
$(window).scroll(function() {

var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum).toLocaleString("en-US"));
},
complete: function() {
$this.text(this.countNum.toLocaleString("en-US"));
}
});
});
a = 1;
}
});
</script>
<div id="counter">
    <div class="sqs-col sqs-col-3 counter-value-1 counter-value" data-count="30000" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-2 counter-value" data-count="135" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-3 counter-value" data-count="18" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-4 counter-value" data-count="100" data-desc="countries surveyed in">0</div>
</div>
<style>     
 .counter-value-1 { 
   font-family: Georgia;
   font-size: 60px;
   color: #A42B28;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-1:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
   .counter-value-2 { 
   font-family: Georgia;
   font-size: 60px;
   color: #EA7326;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-2:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
  .counter-value-3 { 
   font-family: Georgia;
   font-size: 60px;
   color: #24B24B;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-3:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
   .counter-value-4 { 
   font-family: Georgia;
   font-size: 60px;
   color: #A9CF39;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-4:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
</style>

Answer 1

我已将额外的数据字段data-suffix设置为最后两个元素，因此我可以在循环元素时找到该后缀并使用它:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var a = 0;
$(window).scroll(function() {

var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
   $('.counter-value').each(function() {
   var $this = $(this),
   countTo = $this.attr('data-count');
   $({
   countNum: $this.text()
   }).animate({
   countNum: countTo
   },
   {
   duration: 2000,
   easing: 'swing',
   step: function() {
   var suffix=$this.data("suffix");
   $this.text(Math.floor(this.countNum).toLocaleString("en-US") +suffix);
   },
   complete: function() {
   var suffix=$this.data("suffix");
   $this.text(this.countNum.toLocaleString("en-US") + suffix);
   }
});
});
a = 1;
}
});
</script>
<div id="counter">
    <div class="sqs-col sqs-col-3 counter-value-1 counter-value" data-count="30000" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-2 counter-value" data-count="135" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-3 counter-value" data-count="18" data-desc="countries surveyed in" data-suffix="%">0</div>
    <div class="sqs-col sqs-col-3 counter-value-4 counter-value" data-count="100" data-desc="countries surveyed in" data-suffix="%">0</div>
</div>
<style>     
 .counter-value-1 { 
   font-family: Georgia;
   font-size: 60px;
   color: #A42B28;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-1:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
   .counter-value-2 { 
   font-family: Georgia;
   font-size: 60px;
   color: #EA7326;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-2:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
  .counter-value-3 { 
   font-family: Georgia;
   font-size: 60px;
   color: #24B24B;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-3:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
   .counter-value-4 { 
   font-family: Georgia;
   font-size: 60px;
   color: #A9CF39;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-4:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
</style>