javascript - 在多个事件上触发函数

Question

我编写了一些代码，如果左侧的文本比右侧的图像长，则可以折叠 2 列:

var collapsed = null;
var banner = function() {
    var txt = $('.banner .text').outerHeight();
    var image = $('.banner .main-image').outerHeight();
    if (txt > image) {
        // Collapse columns
        $('.banner').addClass('single-line');
        // Set the breakpoint the column collapsed at
        if (collapsed == null) {
            collapsed = $(window).width();
        }
    }

    // Restore the 2 columns when the browser hits the breakpoint
    if ($(window).width() >= collapsed) {
        $('.banner').removeClass('single-line')
    }
}

我的问题是让这个函数在正确的时间触发。这有效:

$(window).resize(banner);

但是这些都不起作用......

$(window).onload(banner); // When the page first loads
$(window).on('orientationchange', banner); // When device is rotated

我可能完全走错了路，所以请随时为我指出正确的方向。

提前致谢!

Answer 1

根据JQuery的文档，jquery对象没有“onload”方法，而应该使用“ready”:

$(window).ready(banner);

关于这一行没有被解雇，可能是因为您使用了错误的合成。“on”方法的引用:

.on( 事件 [, 选择器 ] [, 数据 ], 处理程序 )

所以你应该尝试这个:

$(window).on('orientationchange','window', banner)

干杯