두 개의 다른 "크기 조정"기능을 통합하십시오.

Question

창이 크기가 조정될 때 트리거되는 두 가지 다른 기능이 있습니다. 코드를 통합하는 코드를 줄이고 싶습니다. 두 기능은 모두 잘 작동합니다.

첫 번째 기능은 "전체 화면"으로 반응하는 영웅 배너를 만드는 방법입니다.

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