1

現在どのスライドにいるかを追跡し、結果を表示する関数を作成しました。たとえば、スライド 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

4

3 に答える 3

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のロードは問題ありません）。

これは、読み込み時にクリック ハンドラーを確立するだけであることに注意してください。また、一度実行するには、関数を自分で呼び出すか、クリックをトリガーすることで自動的に実行できます。自分で呼び出すには、まず別の関数を定義します。クリック ハンドラーと 1 つの即時呼び出しの両方で関数を使用します。

$(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();
});
于 2012-04-11T15:44:22.410 に答える
0

jQueryを使用しているように見えるので、これを使用します：

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

または、次のショートカットを使用できます。

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

詳細については、jQuery の Web サイトを参照してください。

于 2012-04-11T15:44:27.687 に答える
0

関数に名前を付けると、複数回使用できます。

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

これはあなたが探しているものですか？

于 2012-04-11T15:51:01.363 に答える