Высота элемента не обновляется после изменения 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 скрипку
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); 
}); 

Answer 2

Вы слишком задумываетесь об этом! Для этого вам не нужен jQuery, только CSS media queries.

Вот пример

nav { 
    display: block; 
} 

@media screen and (max-width: 480px) { 
    nav { 
    display: none; 
    } 
} 

Это скроет навигационную панель на мобильных устройствах (или технически, ничего с высотой экрана меньше, чем 480px). Вы можете, очевидно, изменить максимальную ширину и стили в соответствии с вашими потребностями. Это намного превосходит JQuery по ряду причин

1. Это намного легче читать
2. Это не требует JavaScript, поэтому он будет работать для пользователей/устройств, не поддерживающих JavaScript (который данность, почти никто в эти дни). Но не используя javascript также значительно ускорит время загрузки страницы.
3. В целом (начиная с выпуска CSS3) вам почти никогда не нужно использовать javascript (или jQuery) для настройки стиля. Поэтому, поскольку вы пытаетесь изменить стиль/внешний вид страницы, вы должны использовать CSS. Оставьте JS динамической функциональностью вашей веб-страницы, а не стилями.