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>

当我调试它时,我得到的错误表明.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对象.