统一两个不同的 "resize" 函数

Question

我有两个不同的函数会在 window 调整大小时触发。我想减少统一它们的代码行。这两个功能分别运行良好。

第一个功能是创建 "full-screen" 响应式英雄横幅的方法。

$(window).on("resize",fullScreenHero);

function fullScreenHero(){
    var ancho=$(window).width();
    var altoNav=$("nav").height();
    var alto=$(window).height()-altoNav;
    $("#hero").width(ancho);
    $("#hero").height(alto);
}

第二个函数打算改变网格视图的布局，删除和添加类。

$(window).resize(function(){
    if ($(window).width() < 1000) {
        $('#services .service-col').removeClass('col-4').addClass('col-6');
    } else {
        $('#services .service-col').removeClass('col-6').addClass('col-4');
    }
});

/* ---------- GRID-VIEW --------- */

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

我尝试了以下和其他变体，但没有用。

$(window).on("resize",fullScreenHero,transformColumn);

function fullScreenHero(){
    var ancho=$(window).width();
    var altoNav=$("nav").height();
    var alto=$(window).height()-altoNav;
    $("#hero").width(ancho);
    $("#hero").height(alto);
}

function transformColumn(){
    if ($(window).width() < 1000) {
        $('#services .service-col').removeClass('col-4').addClass('col-6');
    } else {
        $('#services .service-col').removeClass('col-6').addClass('col-4');
    }   
};

发生的问题是英雄横幅根本没有调整大小。 "transformColumn" 功能有效。

Answer 1

试试这个：

$(window).on("resize",function(){
   fullScreenHero();
   transformColumn();
});

统一两个不同的 "resize" 函数

Unify two different "resize" functions

jquery

resize

window-resize