我想显示我从API获得的数字，我使用JSON获得了这个数字。我想把反作用放在那里，它显示"isNaN"。API URL返回一个对象并将总数保存在data.data中有人能帮我做这个吗？
<p class="Count member-count" style="color:#BA1823; font-size: 40px;">
<script>
$.getJSON('https://url.com/cmp/server/api/get-total-member', function(data) {
var text = `${data.data}<br>`
$(".member-count").html(text);
});
</script>
</p>
<script>
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
</script>
问题是因为AJAX调用是异步的，所以包含动画逻辑的each()循环在请求完成且p元素有任何内容之前运行。
要解决此问题，请将each()调用放在AJAX回调中：
<p class="Count member-count"></p>
$.getJSON('https://url.com/cmp/server/api/get-total-member', function(data) {
$(".member-count").html(`${data.data}<br>`);
$('.Count').each(function() {
var $this = $(this);
jQuery({
Counter: 0
}).animate({
Counter: data.data
}, {
duration: 1000,
easing: 'swing',
step: function() {
$this.text(Math.ceil(this.Counter));
}
});
});
});
.member-count {
color: #BA1823;
font-size: 40px;
}
同样值得注意的是，不应该将<script>标记放在HTML结构的中间。要么把它们放在<head>中，要么就在</body>之前。同样，不要将CSS规则放在内联style属性中。将它们放在外部.css文件中。下面是一个jsFiddle，它包含了经过完全更正的HTML和JS。