我想在此代码中的计数器之前添加一个美元符号货币符号

Question

我想在顶部的计数前添加一个固定的“$”。当我尝试了任何东西时，它打破了计数器并说 "NaNo" 我对编码一无所知，我希望有人能告诉我要添加什么以及将它放在代码块中的确切位置。我希望顶部的主要数字是货币，以匹配我添加的信息。我之前添加了使它成为数字格式的函数，因此可能需要另一个函数？

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 = number_format(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
        countNum: countTo
      }, {
        duration: 2000,
        easing: 'swing',
        step: function() {
          $this.text(Math.floor(this.countNum));
        },
        complete: function() {
          $this.text(this.countNum);
        }
      });
    });
    a = 1;
  }
});

function number_format(number) {
  var num = number.toLocaleString('en-US', {
    maximumFractionDigits: 0
  })
  return num;
}

var a = 0;
$(window).ready(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(number_format(this.countNum));
        },
        complete: function() {
          $this.text(number_format(this.countNum));
        }
      });
    });
    a = 1;

  }
});

.counter-value {
  font-size: 80px;
  line-height: 2em;
  text-align: center;
  padding: 17px 0;
}

.counter-value:after {
  content: attr(data-desc);
  display: block;
  text-transform: none;
  font-size: 16px;
  line-height: 1.2em;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<div id="counter">
  <div class="sqs-col sqs-col-4 counter-value" data-count="4172" data-desc="The average American’s 401(k) balance is 4,300 — 
    this amount of money can only be expected to generate ,172 in 
    sustainable annual retirement income">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="1409" data-desc="As of March 2018, the average monthly Social Security 
    payment is ,409">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="40000" data-desc="To live on ,000 a year after stopping work, you will 
    need savings of about .18 million to support a 30-year 
    retirement">0</div>
</div>



<div style="border: 0px solid black">
</div>

Answer 1

您可以简单地将内容为“$”的CSS选择器添加到counter-valueclass之前。这会将 $ 符号放在每个元素之前 class of counter-value:

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 = number_format(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
        countNum: countTo
      }, {
        duration: 2000,
        easing: 'swing',
        step: function() {
          $this.text(Math.floor(this.countNum));
        },
        complete: function() {
          $this.text(this.countNum);
        }
      });
    });
    a = 1;
  }
});

function number_format(number) {
  var num = number.toLocaleString('en-US', {
    maximumFractionDigits: 0
  })
  return num;
}

var a = 0;
$(window).ready(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(number_format(this.countNum));
        },
        complete: function() {
          $this.text(number_format(this.countNum));
        }
      });
    });
    a = 1;

  }
});

.counter-value {
  font-size: 80px;
  line-height: 2em;
  text-align: center;
  padding: 17px 0;
}

.counter-value:before {
  content: "$";
}

.counter-value:after {
  content: attr(data-desc);
  display: block;
  text-transform: none;
  font-size: 16px;
  line-height: 1.2em;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<div id="counter">
  <div class="sqs-col sqs-col-4 counter-value" data-count="4172" data-desc="The average American’s 401(k) balance is 4,300 — 
    this amount of money can only be expected to generate ,172 in 
    sustainable annual retirement income">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="1409" data-desc="As of March 2018, the average monthly Social Security 
    payment is ,409">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="40000" data-desc="To live on ,000 a year after stopping work, you will 
    need savings of about .18 million to support a 30-year 
    retirement">0</div>
</div>



<div style="border: 0px solid black">
</div>

Answer 2

尝试将以下代码片段添加到主题设置或文件中的自定义 CSS 区域，以在计数器中添加 $ 或 + 或任何其他符号。

计数器符号代码前：

#counter .counter-value:before{ content: "$"; display: inline; }

计数器符号代码后：

#counter .counter-value:after{ content: "$"; display: inline; }

提示：您正在使用ID <div id="counter">

您还可以将符号内容值更改为任何其他符号，例如：+

我想在此代码中的计数器之前添加一个美元符号货币符号

I want to add a dollar sign currency symbol before the counter in this code

jquery

html

squarespace