javascript - 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 方法不存在。但是当我尝试编写它时，我得到了 Visual Studio 的帮助，它向我展示了使用它的选项，所以它应该存在 :P 我可以使用其他东西吗？还是我的语法有误？

Answer 1

.find 和 .animate 是 jQuery 函数。当 scoreBar 是一个 jQuery 对象时，它们就存在。当您使用 document.getElementById 分配它时不是。 getElementById 是一个纯 javascript 函数，将返回一个 DOM 节点。

如果您使用的是 jQuery 框架，则可以通过使用 $(...) 将任何 DOM 节点包装成一个 jQuery 对象。对于您的特定场景，您可以完全重写变量赋值:

var scoreBar = $('#dynamicScoreBar');

...并且 scoreBar 变量将是一个 jQuery 对象，具有可用的 find 和 animate 功能。