javascript - jQuery - 在两个单独的事件上触发函数

Question

我想让我的导航以两种方式工作 - 通过单击箭头和滑动（在手机上）。

我的“点击”功能如下：

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

但它不起作用。

有任何想法吗？

Answer 1

我认为问题在于：您在函数中使用 $(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);

};