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');
    }   
};

发生的问题是Hero横幅根本没有调整大小。 “transformColumn”功能有效。

Answer 1

试试这个：

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

统一两个不同的“调整大小”功能

1 个答案: