Javascript 加载时在html上编写

我已经创建了一个函数，它跟踪我当前所在的幻灯片并显示结果 e、 g.如果我在第2张幻灯片（共3张）上，它将显示2/3

我的问题是，现在它设置为每次单击前进箭头时都这样做，但它在页面加载时不显示任何内容

$('.forward').click(function() {
var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
var count = $("#slider").children().length - 2;
$("#bottom-image").html(current + "/" + count) ;
});

我试图找出如何在页面加载时执行此函数，以及在代码中的位置。我目前正在通过Codecadamedy学习Javascript，所以我对Javascript有了基本的了解，但我现在还不够流利，无法理解这一点

---

这里有一个指向当前非工作代码的链接：

看起来您正在使用jQuery。要在查询中加载DOM时执行函数，请执行以下操作：

$(document).ready(function() {
    /* your code */
});

在您的情况下，这将是：

$(document).ready(function() {
    $('.forward').click(function() {
        var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
        var count = $("#slider").children().length - 2;
        $("#bottom-image").html(current + "/" + count) ;
    });
});

对于大多数事件处理程序和其他大多数事情，在DOM加载时初始化就足够了。如果代码需要考虑渲染元素或渲染高度，请改用

$（window）.load（）

。（在您的情况下，DOM加载是可以的）

注意，这只会在加载时建立click处理程序。要同时运行一次，您可以通过自己调用函数或触发单击来自动执行。要自己调用它，首先定义另一个函数。在单击处理程序和一个立即调用中使用该函数：

$(document).ready(function() {
    var forward = function() {
        var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
        var count = $("#slider").children().length - 2;
        $("#bottom-image").html(current + "/" + count) ;
    }

    $('.forward').click(forward);
    forward();
});

或者，要自己触发它，只需定义单击处理程序并以编程方式触发单击：

$(document).ready(function() {
    $('.forward').click(function() {
        var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
        var count = $("#slider").children().length - 2;
        $("#bottom-image").html(current + "/" + count) ;
    }).click();
});

---

看起来您正在使用jQuery。要在查询中加载DOM时执行函数，请执行以下操作：

$(document).ready(function() {
    /* your code */
});

在您的情况下，这将是：

$(document).ready(function() {
    $('.forward').click(function() {
        var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
        var count = $("#slider").children().length - 2;
        $("#bottom-image").html(current + "/" + count) ;
    });
});

对于大多数事件处理程序和其他大多数事情，在DOM加载时初始化就足够了。如果代码需要考虑渲染元素或渲染高度，请改用

$（window）.load（）

。（在您的情况下，DOM加载是可以的）

注意，这只会在加载时建立click处理程序。要同时运行一次，您可以通过自己调用函数或触发单击来自动执行。要自己调用它，首先定义另一个函数。在单击处理程序和一个立即调用中使用该函数：

$(document).ready(function() {
    var forward = function() {
        var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
        var count = $("#slider").children().length - 2;
        $("#bottom-image").html(current + "/" + count) ;
    }

    $('.forward').click(forward);
    forward();
});

或者，要自己触发它，只需定义单击处理程序并以编程方式触发单击：

$(document).ready(function() {
    $('.forward').click(function() {
        var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
        var count = $("#slider").children().length - 2;
        $("#bottom-image").html(current + "/" + count) ;
    }).click();
});

---

看起来您使用的是jQuery，因此您可以使用：

$(document).ready(function(){
    // Code here
});

或者，您可以使用快捷方式：

$(function(){
    // Code here
});

---

请在

上阅读更多关于这方面的信息。看起来您正在使用jQuery，因此您可以使用：

$(document).ready(function(){
    // Code here
});

或者，您可以使用快捷方式：

$(function(){
    // Code here
});

---

请在

上阅读有关此功能的详细信息。如果您为该函数命名，则可以多次使用该函数：

$(document).ready(function() {
    // Bind to click event
    $('.forward').click(forwardSlide)

    // Execute function on page load
    forwardSlide();
});

function forwardSlide() {
    var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
    var count = $("#slider").children().length - 2;
};

---

这就是您要找的吗？

如果您为函数命名，则可以多次使用它：

$(document).ready(function() {
    // Bind to click event
    $('.forward').click(forwardSlide)

    // Execute function on page load
    forwardSlide();
});

function forwardSlide() {
    var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
    var count = $("#slider").children().length - 2;
};

---

这就是你要找的吗？

Francis，我在你的文章中添加了一个“jquery”标记，因为你的代码示例使用的是jquery，而不是vanilla javascript。Francis，我在你的文章中添加了一个“jquery”标记，因为你的代码示例使用的是jquery，而不是vanilla javascript。@FrancisThibault，好的，我在回答中的代码示例中添加了这一行。答案是一样的，使用

$（document）.ready（）

@FrancisThibault，您还需要dom加载事件来设置处理程序。如果您还想在启动时自动运行一次，您必须自己执行此操作。我举了两个例子来说明你是如何做到这一点的。但是，当我第一次点击转发时，Javascript没有被执行，我得到了1/3 1/3 2/3 3 3/3 1/3 2/3@FrancisThibault，好吧，我在回答中把这一行添加到了代码测试中。答案是一样的，使用

$（document）.ready（）

@FrancisThibault，您还需要dom加载事件来设置处理程序。如果您还想在启动时自动运行一次，您必须自己执行此操作。我举了两个例子来说明你是如何做到这一点的。但是，当我第一次点击转发时，Javascript没有被执行，我得到了1/3 1/3 2/3 3 3/3 1/3 2/3。。。是和否，它缺少一行（我添加了它），现在我的滑块可以正常工作，除了第一次单击箭头。是和否，它缺少一行（我添加了它），现在我的滑块可以正常工作，除了第一次单击箭头。