0

ナビゲーションを 2 つの方法で機能させたいと考えています。矢印をクリックする方法とスワイプする方法 (携帯電話の場合) です。

私の「クリック」機能は次のとおりです。

        $(this).children('.carousel-control').on('click', function() {
            config.containers.removeClass('fading');
            config.containers.removeClass('fadingback');

            if($(this).is('.left')) {

                $(this).parent().addClass('fading');
                config.mainCont.animate({
                    scrollLeft: $(this).parent().prev('article').offset().left
                }, 500);

            } else {

                $(this).parent().addClass('fadingback');
                config.mainCont.animate({
                    scrollLeft: $(this).parent().next('article').offset().left
                }, 500);

            }

            return false;
        })

さて、もう一度書くのを避けることができるかどうかはわかりませんが、swipe代わりにon. これを回避する方法はありますか？

次のように、別の関数を書いてみました。

function goLeft() {
    $(this).parent().addClass('fading');
    config.mainCont.animate({
        scrollLeft: $(this).parent().prev('article').offset().left
    }, 500);
};

function goRight() {
    $(this).parent().addClass('fadingback');
    config.mainCont.animate({
        scrollLeft: $(this).parent().next('article').offset().left
    }, 500);

};

次のように実行します。

        $(this).children('.carousel-control').on('click', function() {
            config.containers.removeClass('fading');
            config.containers.removeClass('fadingback');

            if($(this).is('.left')) {

                goLeft();

            } else {

                goRight();

            }

            return false;
        })

しかし、うまくいきません。

何か案は？

4

1 に答える 1

0

問題は、関数内で $(this) を使用していることです。呼び出し元から渡そうとしています

これを試して：

$(this).children('.carousel-control').on('click', function() {
            config.containers.removeClass('fading');
            config.containers.removeClass('fadingback');

            if($(this).is('.left')) {

                goLeft($(this));

            } else {

                goRight($(this));

            }

            return false;
        })

function goLeft(here) {
    $(here).parent().addClass('fading');
    config.mainCont.animate({
        scrollLeft: $(here).parent().prev('article').offset().left
    }, 500);
};

function goRight(here) {
    $(here).parent().addClass('fadingback');
    config.mainCont.animate({
        scrollLeft: $(here).parent().next('article').offset().left
    }, 500);

};
于 2013-08-31T17:59:27.737 に答える