jQuery事件“on”另一个自定义事件？

Question

我正在使用一个Wordress主题(TheGem)，当一些主题jQuery发生时，我想附加一些自定义代码。

我可以使用on将我的代码附加到其他一些现有代码吗？例如，我是否可以在我的页面中：

$(document).ready(function() {
   $(document).on("$.pageScroller.next()", function() {
     console.log("it's working!");
   });
});

背景:我想做的就是在页面滚动到顶部时隐藏徽标。我通常使用：

<script>
jQuery(window).scroll( function() {
    if( jQuery(this).scrollTop() > 0 ) {
        show_logo();
    }
    else {
        hide_logo();
    }
});

function hide_logo() {
    jQuery(".site-title .site-logo a .logo img").css('visibility', 'hidden');
}

function show_logo() {
    jQuery(".site-title .site-logo a .logo img").css('visibility', 'visible');
}
</script>

但是这个特殊的站点启用了垂直的全窗格滚动，我不相信页面实际上是‘滚动’的，所以我希望能连接到显示下一部分的内容。在本例中，即为$.pageScroller.next()

下面是我试图附加到的代码的JS。

(function($){

    $.pageScroller = {

        items: $('.scroller-block'),
        navigationPane: null,
        activeItem: 0,
        animated: false,

        init: function() {
            var that = this;
            $('body').css({overflow: 'hidden'});
            $(window).trigger('resize');
            if(that.items.length) {
                that.navigationPane = $('<div class="page-scroller-nav-pane"></div>');
                that.navigationPane.appendTo($('body'));
                that.items.each(function(index) {
                    var $target = $(this);
                    $('<a href="javascript:void(0);" class="page-scroller-nav-item"></a>')
                        .appendTo(that.navigationPane)
                        .data('scroller-target', $target)
                        .on('click', function(e) {
                            e.preventDefault();
                            that.goTo(index);
                        });
                });
            }
            that.update();
            $(window).on('resize', function() {
                that.update();
            });
        },

        update: function() {
            var that = this;
            if($.pageScroller.navigationPane.is(':visible')) {
                $('html, body').scrollTop(0);
            }
            $('#main').addClass('page-scroller-no-animate');
            $('#main').css('transform','translate3d(0,0,0)');
            that.items.each(function() {
                $(this).data('scroll-position', $(this).offset().top);
            });
            that.goTo(that.activeItem, function() {
                setTimeout(function() {
                    $('#main').removeClass('page-scroller-no-animate');
                }, 100);
            });
        },

        next: function() {
            this.goTo(this.activeItem + 1);
        },

        prev: function() {
            this.goTo(this.activeItem - 1);
        },

        goTo: function(num, callback) {
            var that = this;
            if(that.animated) return;
            if(num == -1 || num >= this.items.length) return;
            var target_top = this.items.eq(num).data('scroll-position');
            var css = $('#main').css('transform');
            $('#main').css({'transform':'translate3d(0,-'+target_top+'px,0)'});
            setTimeout(function() {
                if(css == $('#main').css('transform')) {
                    that.animated = false;
                    that.activeItem = num;
                    $('.page-scroller-nav-item', that.navigationPane).eq(num).addClass('active');
                    if($.isFunction(callback)) callback();
                    that.updateTrigger(that.items.eq(num));
                    $('#main').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
                }
            }, 50);
            $('.page-scroller-nav-item.active', that.navigationPane).removeClass('active');
            that.animated = true;
            if($('#main').hasClass('page-scroller-no-animate')) {
                that.animated = false;
                that.activeItem = num;
                $('.page-scroller-nav-item', that.navigationPane).eq(num).addClass('active');
                if($.isFunction(callback)) callback();
                that.updateTrigger(that.items.eq(num));
            } else {
                $('#main').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                    that.animated = false;
                    that.activeItem = num;
                    $('.page-scroller-nav-item', that.navigationPane).eq(num).addClass('active');
                    if($.isFunction(callback)) callback();
                    that.updateTrigger(that.items.eq(num));
                });
            }
        },

        updateTrigger: function(elem) {
            $(document).trigger('update-page-scroller', elem);
        }

    };

    $(function() {
        if(!$('body').hasClass('compose-mode')) {
            $.pageScroller.init();
            var indicator = new WheelIndicator({
                elem: document.querySelector('body'),
                callback: function(e){
                    if(e.direction == 'up') {
                        $.pageScroller.prev();
                    } else {
                        $.pageScroller.next();
                    }
                }
            });
            $(window).on('resize', function() {
                if($.pageScroller.navigationPane.is(':visible')) {
                    indicator.turnOn();
                } else {
                    indicator.turnOff();
                }
            });
            $('body').swipe({
                allowPageScroll:'vertical',
                preventDefaultEvents: false,
                swipe:function(event, direction, distance, duration, fingerCount) {
                    if($.pageScroller.navigationPane.is(':visible')) {
                        if(direction == 'down') {
                            $.pageScroller.prev();
                        }
                        if(direction == 'up') {
                            $.pageScroller.next();
                        }
                    }
                },
            });
        }
    });

})(jQuery);

Answer 1

遗憾的是，您的主题作者没有触发任何您可以挂接到的名称空间事件，但幸运的是，他们至少有资格将pageScroller对象附加到jQuery

这意味着你可以用猴子补丁代码来满足你的需要。

看看goTo函数，如果在prev和next函数上有一个回调函数，他们似乎会运行一个回调函数。没有，但是你可以像这样添加它们：

function getPosition(){
   console.log($(window).scrollTop());
}

$.pageScroller = $.extend($.pageScroller,{
    next: function() {
        this.goTo(this.activeItem + 1,getPosition);
    },

    prev: function() {
        this.goTo(this.activeItem - 1,getPosition);
    },
});

Answer 2

好吧，我想我们可以在这里使用一个Promise (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)对象。

只发布代码的相关部分

(function($){
    next: function() {
        let promise = new Promise(function(resolve, reject) {
          this.goTo(this.activeItem + 1);
        });
        promise.then(function(value) {
            console.log("After next() scroll has completed");
        });
    }
});

这基本上会在this.goTo(this.activeItem + 1)调用完成后触发

Answer 3

对于使用全屏垂直滑块页面的TheGem主题的其他人，这就是我现在显示/隐藏标题徽标的方式。我之前的方法在移动设备上有效，因为页面实际上是滚动的，但在更大的屏幕上，我现在使用选择的答案来检查第一个滑块导航点是否处于活动状态。

<script>
jQuery(document).ready(function(){

    jQuery.extend(jQuery.pageScroller,{
        next: function() {
            this.goTo(this.activeItem + 1, isItFirstSlide);
        },

        prev: function() {
            this.goTo(this.activeItem - 1, isItFirstSlide);
        },
    });   


    function isItFirstSlide() {
        if (jQuery('.page-scroller-nav-pane a').first().hasClass('active')) {
            hide_logo();
        } else {
            show_logo();
        }
    }

    //for mobiles
    jQuery(window).scroll( function() {
        if( jQuery(this).scrollTop() > 0 ) {
            show_logo();
        } else {
            hide_logo();
        }
    });

    function hide_logo() {
        jQuery(".site-title .site-logo a .logo img").css('visibility', 'hidden');
    }

    function show_logo() {
        jQuery(".site-title .site-logo a .logo img").css('visibility', 'visible');
    }

});

</script>