jQuery .find（）和.animate（）

Question

我正在做一個溫度計，我正在製作溫度計的動畫。我這樣做，這個JavaScript方法：

function setScoreBar(score) { 
    var scoreBar = document.getElementById("dynamicScoreBar"); 
    // var scoreBar = $(scoreBarElem); 
    var height = 250; 
    height = height - 20; 
    var percentage = height/100; 
    scoreBar.find(".meter").animate({ 
     marginTop: (height - (score * percentage)) + "px" 
    }, 400, function() { 
     scoreBar.find(".meter").html(score + "%"); 
    }); 
} 

和我的HTML看起來像這樣

<div id="dynamicScoreBar" class="scoreBar"> 
    <div class="meter">0%</div> 
    <div class="red"></div> 
</div> 

當我debugg它，我得到錯誤，指出該.find和.animate方法不存在。但是，當我嘗試寫它時，我從視覺工作室獲得幫助，並向我顯示使用它的選項，因此應該存在：P可以使用其他內容嗎？或者我有任何語法錯誤？

Answer 1

.find和.animate是jQuery函數。當scoreBar是一個jQuery對象時，它們存在。這不是當你分配document.getElementById。 getElementById是一個純JavaScript函數，將返回一個DOM節點。

如果您使用jQuery框架，您可以將任何DOM節點轉換爲jQuery對象，方法是使用$(...)包裝它。針對您的特殊情況下，你可以重寫變量的賦值完全：

var scoreBar = $('#dynamicScoreBar'); 

...和scoreBar變量將與現有的find和animate功能的jQuery對象。