javascript - jquery调整大小后元素高度不更新

Question

调整大小时，它不会更新高度。一旦负载设置了它的高度，它就不会更新，尽管我更新了变量。

如果我删除设置高度的行，那么我的变量更新正常，但是一旦设置了高度，它就什么都不做。

我哪里做错了？

var hero_height = $('.hero-image').outerHeight();
console.log('heroHeight: ' + hero_height);

$(document).ready(function() {
    $(window).load(function() {

        $('.hero-image').css('height', hero_height );

    });

    $(window).resize(function() {

        if (hero_height !== $('.hero-image').outerHeight()) {
            $('.hero-image').css('height', hero_height );
        };

        hero_height = $('.hero-image').outerHeight();
        console.log('heroHeight: ' + hero_height);

    });
});

这是一个 JS fiddle
https://jsfiddle.net/5c1za6xa/

Answer 1

在窗口调整大小函数中包含 var hero_height = $('.hero-image').outerHeight();。

$(window).resize(function() {
    var hero_height = $('.hero-image').outerHeight();
    if (hero_height !== $('.hero-image').outerHeight()) {
        $('.hero-image').css('height', hero_height );
    };

    hero_height = $('.hero-image').outerHeight();
    console.log('heroHeight: ' + hero_height);
});