Question

我创建了一个跟踪我当前在哪张幻灯片上并显示结果的函数例如如果我在幻灯片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的基本知识，但我现在还不够流利地想出这个。

以下是指向当前非工作代码的链接：http://www.soleilcom.com/metacor_dev/our-plants.php

Answer 1

看起来你正在使用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加载很好）。

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

$(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();
});

Answer 2

看起来你正在使用jQuery，所以你会使用它：

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

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

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

在jQuery website

上详细了解此信息

Answer 3

如果您为该功能指定名称，则可以多次使用该功能：

$(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;
};

这是你要找的吗？

在加载时写入html

3 个答案: