.html（）在回調函數中調用時不更新dom？

我正在實現一個相當簡單的倒數小部件，其中的數字一旦發生變化就會下降。但是，一旦數字向下移動，它就不會改變爲下一個值。打印整個對象顯示dom是相同的，但打印出object.html（）會顯示已更新的值。這裏的代碼被簡化爲基本案例。.html（）在回調函數中調用時不更新dom？

<div> 
<p class="countdown"> 
    <span id="days"></span>d 
    <span id="hours"></span>h 
    <span id="minutes"></span>m 
    <span id="seconds">10</span>s 
</p> 
</div>

使用JavaScript

$("#seconds") 
        .css('position','relative') 
        .animate(
        { 
         opacity: 'hide', 
         top: 200 
        }, 
        'slow', 
        function(){ 
         //$(this).css({'opacity': 'show'}); 

         $(this).html(9); 
         console.log($(this)); 
         console.log($(this).html()); 
        ; 
        });

相當簡單吧？它應該下降10（它所做的）並在動畫完成時將其替換爲9。然而，在動畫完成後無任何顯示控制檯輸出以下：

console.log($(this)) = <span id="seconds" style="position: relative; opacity: 1; top: 0px; ">10</span> 


console.log($(this).html()) = 9

不知道爲什麼在html（）值將與DOM仍保持不受影響改變。有任何想法嗎？謝謝。

來源

2011-08-19 jdivock

您是否嘗試過添加引號？ '$（本）。html的（「9」）;'。另外，第二個最後一行還有一個額外的分號嗎？ –

@jang，'.html（）'函數不需要引用字符串 –

K，不知道。謝謝（你的）信息。 –

這裏的問題是，animate函數隱藏了元素。所以你需要顯示它並重置位置。以下代碼適用於我。

$("#seconds").css('position', 'relative').animate({ 
    opacity: 'hide', 
    top: 200 
}, 'slow', function() { 
    $(this).html(9).css({top:0}).show(); 
});

http://jsfiddle.net/EVVPE/

來源

2011-08-19 16:11:52

謝謝，看到我的Chrome調試器在我發佈這個之後就把它隱藏在它的新位置。 – jdivock

這個小小的更新將在10之後向下滾動9：http://jsfiddle.net/EVVPE/1/ – Blazemonger

預期應該理想地工作，你可以嘗試用text方法。

$(this).text(9);

來源

2011-08-19 16:15:41 ShankarSangoli

.html（）在回調函數中調用時不更新dom？

回答

相關問題