JQuery計數器內的文本

我想在Jquery計數器中添加一些文本。我希望文本出現在數字下方。如果我將它添加進去，它會消失。這是代碼。JQuery計數器內的文本

<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>

來源

2013-12-08 therookie

這是因爲您的p標籤每次調用.text（）時都會被替換。嘗試添加它那裏，而不是... Here is a fiddle

我強烈建議使用HTML（），而不是文本（），所以這種方式可以在標記:)添加

$({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>'); 
} 
});

你也應該不會被插入這成ap標籤，因爲你限制它將接受的標籤。試試這個代替

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

編輯：根據@therookie的評論。對於在每個計數器上具有唯一ID的多個計數器，那麼您將希望通過這樣的FOR循環步進這些步驟EXAMPLE

來源

2013-12-08 22:02:09 Xanfar

謝謝我會嘗試。但是如果我想並排添加三個這樣的計數器呢？ – therookie

@therookie我在EDIT下添加了一個小提琴，包括多個計數器 – Xanfar

JQuery計數器內的文本

回答

相關問題