Question

因此，我在页面上显示了一些统计信息。它运作良好，非常简单。我似乎无法获得一个后缀或前缀来工作，可能是因为我是一般编码新手。我在哪里添加％或£$，以便它们在数字旁边显示

$('.counter').each(function() {
    var $this = $(this), countTo = $this.attr('data-count');  
    $({ countNum: $this.text()}).animate({
        countNum: countTo
        },
        {
            duration: 5000,
            easing:'linear',
            step: function() {
                $this.text(Math.floor(this.countNum));
            },
            complete: function() {
            $this.text(this.countNum);
        }
    });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="webstats_container">
    <div align="center" class="webstats">
        <h3><strong>Our Stats</strong></h3>
		<div class="row">
			<div class="col-sm-4">
			    <span>Average Claim:</span>
				<div class="counter" data-count="100">
			    </div>
			</div>
			<div class="col-sm-4">
			    <span>Uphold Percentage:</span>
				<div class="counter" data-count="100">
				</div>
			</div>
			<div class="col-sm-4">
			<span>Total Claimed:</span>
				<div class="counter" data-count="100">
				</div>
			</div>
		</div>	
	</div>
</div>

Answer 1

在将计数器值设置为元素时，可以附加后缀和前缀值

为此，您可以进行更改；

$this.text(Math.floor(this.countNum));

和

 $this.text(this.countNum);

至

var suffix="";
var prefix="%";
$this.text(suffix+Math.floor(this.countNum)+ prefix);

和

$this.text(suffix+this.countNum + prefix );

 var suffix="";
     var prefix="%";
    $('.counter').each(function() {
    var $this = $(this),
    countTo = $this.attr('data-count');  
    $({ countNum: $this.text()}).animate({
    countNum: countTo
    },
    {
    duration: 5000,
    easing:'linear',
    step: function() {
    $this.text(suffix+Math.floor(this.countNum)+ prefix);
    },
    complete: function() {
    $this.text(suffix+this.countNum + prefix );
    }
    });  
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="webstats_container">
    <div align="center" class="webstats">
    <h3><strong>Our Stats</strong></h3>
		<div class="row">
			<div class="col-sm-4">
			<span>Average Claim:</span>
				<div class="counter" data-count="100">
				</div>
			</div>
			<div class="col-sm-4">
			<span>Uphold Percentage:</span>
				<div class="counter" data-count="100">
				</div>
			</div>
			<div class="col-sm-4">
			<span>Total Claimed:</span>
				<div class="counter" data-count="100">
				</div>
			</div>
		</div>	
	</div>
</div>

在简单的数字计数器脚本中添加后缀/前缀

1 个答案: