2つの異なる "サイズ変更"機能を統合する

Question

ウィンドウがサイズ変更されたときにトリガーする2つの異なる機能があります。私はそれらの統一コードを減らしたいと思います。両方の機能は別々に機能します。

最初の機能は、「フルスクリーンの」応答性の高いヒーローバナーを作成する方法です。

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