0

私はこのJSコードを持っています:

function paging() { 
    $('.paging li').click(function(e) {
        $('.paging li a').removeClass("active");
        $(this).find('a').addClass("active");
        $('#img-grp-wrap img').hide();

        var indexer = $(this).index(); 
        $('#img-grp-wrap img:eq('+indexer+')').fadeIn();    

        e.preventDefault();
        return indexer;
    });
}

var $cur_page = paging();
console.log($cur_page);

関数 paging() の外でインデクサー値を使用したいのですが、console.log() を実行しようとすると、undefinedと表示されます。

クリックしたリンクのインデックス値を関数の外側 (インデクサー変数) に渡すことができるように、これをどのように構造化すればよいでしょうか?

プログラミング初心者ですので、よろしくお願いします。

4

2 に答える 2

3

イベントハンドラーの仕組みを本当に理解していないようです。クリック ハンドラーをインストールすると、将来クリックが発生したときにこの関数を呼び出すようにシステムに指示することになります。paging()要素がクリックされて匿名関数が呼び出されるずっと前に、関数が実行されて完了します。そのpaging()ため、クリックがまだ発生していないため、関数はクリック ハンドラーの結果を返すことができません。

値を使用するコードがある場合indexerは、クリック ハンドラーからそのコードを呼び出し、呼び出してindexerいる関数に引数として値を渡す必要があります。それは次のようになります。

$('.paging li').click(function(e) {
    $('.paging li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#img-grp-wrap img').hide();

    var indexer = $(this).index(); 
    $('#img-grp-wrap img:eq('+indexer+')').fadeIn();    

    e.preventDefault();
    // call a function and pass it the indexer value
    processIndex(indexer);
});

イベント ハンドラーが再度インストールされるため、ページング関数を複数回呼び出したくないため、ページング関数も削除したことに注意してください。

于 2012-05-02T03:52:47.307 に答える
1

@ jfriend00が言うように、イベントハンドラーからの戻り値は、その動作方法が原因で、考えている方法でアクセスすることはできません。

ただし、外部（グローバルなど）スコープに変数を設定し、イベントの発生後に実行する必要のあるアクションをトリガーするように設定することはできます。または、値をパラメーターとして別の関数に渡すこともできます。

例えば

// Declare external variable outside event handler.
var pagingOutput;

function paging() { 
    $('.paging li').click(function(e) {
        // Handle event...

        pagingOutput = someValue;
        actionToPerfomAfterPaging();

        // Of course, you could also do something like this...
        actionToPerformAfterPaging_2(someValue);

    });
}

function actionToPerfomAfterPaging() {
    doSomethingWithPagingOutput(pagingOutput);
}

function actionToPerfomAfterPaging_2(val) {
    doSomethingWithPagingOutput(val);
}

var $cur_page = paging();
console.log($cur_page);

イベントハンドラーから値を返すことができない理由は、スクリプトがページ上の他のすべての処理を担当する同じスレッドで実行されるためです。イベントハンドラーが値を返す方法を理論的に設計する場合は、イベントが発生するまでスレッドをブロックする必要があります。これは、ユーザーがボタンをクリックするなど、ハンドラーが関連付けられているイベントが発生するまでページがフリーズすることを意味します。

于 2012-05-02T04:04:33.573 に答える