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

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

};

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

1 个答案: