jquery resize 후 요소 높이가 업데이트되지 않습니다.

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

이 (기술적 또는 미만 480 픽셀의 화면 높이 아무것도)를 탐색 모바일 기기 바를 숨길 수있다. 당신은 당신의 필요에 맞게 최대 너비와 스타일을 분명히 바꿀 수 있습니다. 이것은 (이다 부여하는이 자바 스크립트를 지원하지 않는 사용자/장치를 작동 할 수 있도록 그것은,이

그것은 자바 스크립트를 필요로하지 않는 읽기 방법 쉽게

1. 이유에서 jQuery를 훨씬 우수 요즘 거의 아무도 없음). 하지만 자바 스크립트를 사용하지 않으면 페이지 로딩 시간이 엄청나게 빨라집니다.
2. 일반적으로 (CSS3가 출시 된 이래로) 스타일을 조정하기 위해 자바 스크립트 (또는 jQuery)를 사용할 필요가 거의 없습니다. 따라서 페이지의 스타일/모양을 변경하려고하므로 CSS를 사용해야합니다. JS를 스타일이 아니라 웹 페이지의 동적 기능으로 남겨 두십시오.