Elementhöhe wird nicht nach jquery resize aktualisiert

Question

Bei der Größenänderung wird die Höhe nicht aktualisiert. Sobald die Last ihre Höhe eingestellt hat, wird sie nicht aktualisiert, obwohl ich die Variable aktualisiert habe.

Wenn ich die Zeilen herausnehmen, wo es die Höhe setzt, dann aktualisiert sich meine Variable gut, aber sobald die Höhe eingestellt ist, tut es nichts.

Wo bin ich falsch gelaufen?

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

    }); 
}); 

Hier ist eine JS Geige
https://jsfiddle.net/5c1za6xa/

Answer 1

Fügen var hero_height = $('.hero-image').outerHeight(); im Fenster Resize-Funktion.

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

Sie überschätzen dies! Sie brauchen jQuery überhaupt nicht, nur CSS media queries.

Hier ist ein Beispiel

nav { 
    display: block; 
} 

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

Dies wird eine Navigationsleiste auf mobile Geräte verstecken (oder technisch, alles mit einer Bildschirmhöhe von weniger als 480px). Sie können natürlich die maximale Breite und Stile an Ihre Bedürfnisse anpassen. Dies ist weit überlegen jQuery für eine Reihe von Gründen

1. Es ist viel einfacher
2. zu lesen Es ist nicht Javascript erforderlich, so dass es für die Benutzer/Geräte funktionieren, die kein JavaScript unterstützt (das die Genehmigung erteilt ist fast niemand in diesen Tagen). Aber die Verwendung von Javascript wird auch die Ladezeit Ihrer Seite enorm beschleunigen.
3. Im Allgemeinen (seit der Veröffentlichung von CSS3), müssen Sie fast nie Javascript (oder jQuery für diese Angelegenheit) verwenden, um Stil anzupassen. Da Sie versuchen, den Stil/das Aussehen der Seite zu ändern, sollten Sie daher CSS verwenden. Belassen Sie das JS für die dynamische Funktionalität Ihrer Webseite, nicht für Stile.