用html加載

Question

我已經創建了一個函數，用於跟蹤我當前在哪張幻燈片上，並顯示結果 如果我在第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; 
}; 

這是你在找什麼？