1

このコード ブロックは思いどおりに動作しますが、それを関数に変換してあちこちで再利用したいと考えています。以下は、関数への変換が続く作業コードです。しかし、私は何か間違ったことをしているので、うまくいきません。

働く

$('div.destination a').click(function(){
    $('html, body').stop(true,false).animate({
        scrollLeft: $( $.attr(this, 'href') ).offset().left 
                        - 1/2 * $(window).width() 
                        + 1/2 * $( $.attr(this, 'href') ).width()
    },
    {
        duration: (Math.abs( $( $.attr(this, 'href') ).offset().left 
                    - $(document).scrollLeft() )) 
                    / 1000 
                    / spaceScaleFactor 
                    / travelRate,
        easing: 'linear',
        queue: false
    });
    $('div.destination').prev().children().children().text(($.attr(this, 'href')).substring(1));
    return false;
});

関数とクリック時の呼び出し (動作しない)

// Make the function and replace 'this' with 'x'

function travelToDestination (x) {
        $('html, body').stop(true,false).animate({
            scrollLeft: $( $.attr(x, 'href') ).offset().left 
                            - 1/2 * $(window).width() 
                            + 1/2 * $( $.attr(x, 'href') ).width()
        },
        {
            duration: (Math.abs( $( $.attr(x, 'href') ).offset().left 
                        - $(document).scrollLeft() )) 
                        / 1000 
                        / spaceScaleFactor 
                        / travelRate,
            easing: 'linear',
            queue: false
        });
        $('div.destination').prev().children().children().text(($.attr(x, 'href')).substring(1));
        return false;
    });
}

//call the function on click using '$(this)' as a parameter

$('div.destination a').click(function(){
    travelToDestination($(this));
}

私が言ったように、コードはそのままで問題なく動作します。関数にしようとしたときに何が間違っているのか知りたいだけです。'this' が '$(this)' と等しくない可能性があります。ありがとう！

4

2 に答える 2

4

次のように変更します。

$('div.destination a').click(function(){
    travelToDestination(this);
}

に置き換えthisたxため、引数は jQuery オブジェクトにラップされていない DOM 要素であると想定されます。

于 2013-10-18T00:16:04.133 に答える
0

この変更を試してください：

$('div.destination a').click(travelToDestination);

x へのすべての参照を に戻しthisます。このようthisに、関数内の はクリックしたボタンです。その時点で、 x として定義したものは、this以前に持っていた要素ではなく、クリック関数のイベントです。

これを行うときに行っていることは、関数参照をクリック ハンドラーに渡すことです。これは、関数自体を渡すことと同じです。だから代わりに

$(selector).click(function _travelToDestination_inlineFunction(){ /* stuff */ })

関数を見つけてそれを使用するように指示しているだけです。上記の「無名関数」での名前付き関数の使用にも注意してください。それは、後で「どこからそれを呼び出したのか..」というスタックのデバッグに常に役立ちます。

2番目に間違ったこと：最初のものでは aを渡しthis、2番目のものでは a を渡して$(this)いますが、後者の関数ではバイパスできます（そして、他のすべてをそのままにしておきます）。次の行を追加します。

function travelToDestination (me) {
    x = me[0]; //I added this line
    $('html, body').stop(true,false).animate({

しかし、私はそれをしません。最初のものを変更するだけです。

于 2013-10-18T00:12:39.630 に答える