Question

我尝试在此代码中阅读和插入文档功能，但我不知道我在做什么。有人能告诉我应该把文档初始化放在哪里，为什么？这将是非常有帮助的。感谢。

这是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);
}
});

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

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

另外：更改方法用于事件处理或触发元素上的事件。您不能以脚本中的方式使用它 - 这是关于方法的文档：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函数来赋予mDetector.setIsLongpressEnabled(false);一定程度的含义。除非你真的想阻止其他/更晚的代码使用你自己的代码，否则很高兴将它公之于众。

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

如何在此脚本中添加$（document）.ready（）函数？

2 个答案:

修订代码