JQuery 在 window 调整大小时 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');
    }
}

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

JQuery 在 window 调整大小时 div 不调整大小

JQuery not resizing div on window resize

javascript

jquery

resize