javascript - JQuery 未在窗口调整大小时调整 div 大小

Question

所以我有一个 JQuery 函数，它的构建目的是使列高相同。它检查屏幕尺寸，如果是在中等尺寸或更大的设备上，它会将列的大小调整到相同的高度。这部分功能效果很好。但是，如果将其调整为移动尺寸(或任何低于 1025 像素的尺寸)，高度不会重置为原始尺寸并保持增加后的尺寸。如果在小屏幕上启动，它会正确显示，直到调整到大屏幕，然后再次调整到小屏幕(然后会出现与上面相同的问题)。

这是代码!

    $(document).ready(function(){
        matchColHeight('.intro-pic', '.intro-desc-container');

        $(window).resize(function(){
            matchColHeight('.intro-pic', '.intro-desc-container');
        });
    }); 

    function matchColHeight(tallColumn, shortColumn){
        shortOriginalHeight = $(shortColumn).height();

        if (window.matchMedia('(min-width: 1025px)').matches) { 
            height = $(tallColumn).height();
            $(shortColumn).css({
                'height': height + 'px'
            });
        }
        else{
            $(shortColumn).css({
                'height': shortOriginalHeight + 'px'
            });
        }
    }

注意:我也尝试过使用以下函数，但它也有同样的问题:

    function matchColHeight(tallColumn, shortColumn){
        shortOriginalHeight = $(shortColumn).height();
        screenSize = $(window).width();

        if (screenSize > 1025){     
            height = $(tallColumn).height();
            $(shortColumn).css({
                'height': height + 'px'
            });
        }
        else{
            $(shortColumn).css({
                'height': shortOriginalHeight + 'px'
            });
        }
    }

提前致谢!

Answer 1

最终通过将函数更改为以下内容解决了我的问题:

function matchColHeight(tallColumn, shortColumn){
    if (window.matchMedia('(min-width: 40em)').matches) {   
    height = $(tallColumn).height();
    $(shortColumn).css({
        'height': height + 'px'
        });
    }
    else{
        $(shortColumn).removeAttr('style');
    }
}

我没有存储原始高度并恢复到原来的高度，而是在不需要时删除了修改后的高度。