Question

我正在尝试在Jquery计数器中添加一些文本。我希望文本显示在数字的正下方。如果我在里面添加它，p>

标签它消失了。这是代码。

<script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.js"></script>   
<script type="text/javascript">
    var currentNumber = $('#dynamic-number').text();
    $({numberValue: currentNumber}).animate({numberValue: 8}, {
        duration: 800,
        easing: 'linear',
        step: function() { 
            $('#dynamic-number').text(Math.ceil(this.numberValue)); 
        }
    });
</script>

<p id="dynamic-number">0</p>

<style>
 #dynamic-number {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px; 
    border:solid 1px #f00; 
    font: bold 55px Arial;
    color: black;
    text-align: center;
    margin: 30px 30px 0 0;  
}
</style>

Answer 1

这是因为每次调用.text（）时都会更换p标签。尝试在那里添加它... Here is a fiddle

我强烈建议使用html（）而不是text（），这样你可以添加标记：）

$({numberValue: currentNumber}).animate({numberValue: 8}, {
duration: 800,
easing: 'linear',
step: function() { 
$('#dynamic-number').html(Math.ceil(this.numberValue)+'<p class="textUnder">some text here</p>'); 
}
});

你也不应该将它插入到p标签中，因为它限制了它会接受的标签。试试这个

<div id="dynamic-number">0<p class="textUnder"></p></div>

编辑：根据@therookie的评论。对于每个计数器上具有唯一ID的多个计数器，您将需要逐步执行具有FOR EXAMPLE

的FOR循环的计数器

JQuery Counter中的文本

1 个答案: