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对象。