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

Question

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

这是 fiddle jquery 的用途

<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

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

$( 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() 方法添加到您的文档来解决此问题 - 允许它在您设置处理程序之前加载。解决此问题的替代方法是将处理程序委托给父元素。

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

Answer 2

放在$('.quantity, .drink').change(calculateTotal);

附近

函数声明不需要在 onReady 块中，事实上将它移到它之外是有意义的（你想公开该函数以供以后 use/use 由其他库使用）。只是实现需要在块中。唯一需要准备就绪的是你想要运行就绪 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 函数中来赋予它一定程度的含义。除非你真的想阻止 other/later 代码使用你自己的代码，否则最好 public 这样。

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

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

How do I add a $( document ).ready() function to this script?

checkbox

jquery

document-ready

修改后的代码