Wysokość elementu nie jest aktualizowana po zmianie wielkości jquery

Question

Podczas zmiany rozmiaru nie aktualizuje wysokości. Gdy obciążenie ustawi jego wysokość, nie zaktualizuje się mimo aktualizacji zmiennej.

Jeśli wyjmę linie, w których ustawia wysokość, moja zmienna aktualizuje się dobrze, ale po ustawieniu wysokości po prostu nic nie robi.

Gdzie popełniłem błąd?

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

    }); 
}); 

Oto JS skrzypce
https://jsfiddle.net/5c1za6xa/

Answer 1

Dołącz var hero_height = $('.hero-image').outerHeight(); w funkcji zmiany rozmiaru okna.

$(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

Przerażasz to! W tym celu nie potrzebujesz jQuery, tylko CSS media queries.

Oto przykład

nav { 
    display: block; 
} 

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

Spowoduje to ukrycie paska nawigacyjnego na urządzeniach mobilnych (lub Technicznie nic o wysokości ekranu mniejszej niż 480px). Oczywiście można zmienić maksymalną szerokość i style, aby dopasować je do swoich potrzeb. To jest o wiele lepsze niż jQuery dla wielu powodów

1. to sposób łatwiejsze do odczytania
2. Nie wymaga JavaScript, więc będzie pracować dla użytkowników/urządzeń, które nie obsługują JavaScript (które przyznawane jest prawie nikogo w dzisiejszych czasach). Ale nie używanie javascript przyspieszy również czas ładowania strony ogromnie.
3. Ogólnie (od wydania CSS3), prawie nigdy nie trzeba używać javascript (lub jQuery w tym zakresie), aby dostosować styl. Dlatego, ponieważ próbujesz zmienić styl/wygląd strony, powinieneś użyć CSS. Pozostaw JS dynamicznej funkcjonalności strony internetowej, a nie stylów.