如何向此脚本添加 $( document ).ready() 函数？

Question

我尝试在这段代码中读取和插入文档函数，但我不知道我在做什么。有人能告诉我应该把文档初始化放在哪里吗？为什么？这会有很大帮助。谢谢。

这是 jquery 的fiddle 用途

<script type="text/javascript">
$('.quantity, .drink').change(calculateTotal);
function calculateTotal() {
    var $form = $(this).closest('form'), total = 0;
    $form.find('.drink:checked').each(function() {
        total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
    });

    $('#totalDiv').text(total);
}
</script>

Answer 1

您只需将整个代码包装在 ready 函数中，如下所示：

$( document ).ready(function() {
$('.quantity, .drink').change(calculateTotal);
function calculateTotal() {
    var $form = $(this).closest('form'), total = 0;
    $form.find('.drink:checked').each(function() {
        total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
    });

    $('#totalDiv').text(total);
}
});

我们这样做是因为它通过在实际 DOM 元素加载之前触发来防止 JQuery 选择器出错...导致不选择任何内容并且不绑定任何处理程序到事件。

您可以通过将 .ready() 方法添加到您的文档来解决这个问题 - 允许它在您设置处理程序之前加载。 解决此问题的另一种方法是将处理程序委托给父元素。

ALSO：更改方法用于事件处理或触发元素上的事件。您不能以您在脚本中的方式使用它 - 这是有关该方法的文档：JQuery - Change Method

Answer 2

把它放在$('.quantity, .drink').change(calculateTotal);附近

函数声明不需要在 onReady 块中，实际上将其移出它是有意义的（您希望公开该函数以供其他库以后使用/使用）。只是实现需要在块中。唯一需要在文档就绪状态下是您想要在就绪 dom 上运行的东西，例如更改示例中的总数。

修改代码

<script type="text/javascript">
// Shorthand for $( document ).ready()
$(function() {
    $('.quantity, .drink').change(calculateTotal);
});

function calculateTotal() {
    var $form = $(this).closest('form'), total = 0;
    $form.find('.drink:checked').each(function() {
        total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
    });

    $('#totalDiv').text(total);
}
</script>

如果这对您很重要，您可以通过将 private 移动到匿名的 onready 函数中来传达一定程度的含义。除非您真的想阻止其他/以后的代码使用您自己的代码，否则很高兴将其公开。

另一方面，您正在使用其他库以后可能覆盖的函数污染公共命名空间。如果你有很多功能，碰撞的机会就会增加。 It is good practice to then use a namespace.