jQuery innerWidth가 작동하지 않습니다. else {페이지를 새로 고침하지 않고

Question

jQuery에 문제가 발생하여 else 문이 실행되지 않습니다. 그 이유는 간단하지만 왜 부족한 가로 인해 해결할 수없는 이유입니다. 내 JavaScript 지식 중 누군가가 내게 문제를 말할 수 있기를 바랍니다.

내 jQuery 스크립트에는 두 가지 조치가 있습니다. 하나는 639px 이상이고 다른 하나는 아래의 조치입니다. 페이지로드에서 작동하지만 1600px에서 600px로 크기를 줄이면 639px 미만이더라도 높이가 요소의 높이로 유지되어 height-min: auto으로 변경되지 않습니다.

$(function() { 
    $(window).resize(function() { 
    if (window.innerWidth >= 639) { 
     windowHeight = $(window).innerHeight(); 
     $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight); 
     $("body.home").vegas({ 
      delay: 8000, 
      transition: 'fade', 
      transitionDuration: 8e3, 
      timer: false, 
      slides: [ 
       { src: "/wp-content/uploads/slide2-0.jpg" }, 
       { src: "/wp-content/uploads/slide2-1.jpg" }, 
       { src: "/wp-content/uploads/slide2-2.jpg" } 
      ], 
      animation: "kenburns" 
     }); 
    } else { 
     // This works but only if the page is loaded with the viewpoint less of 639px 
     // The min-height auto doesn't work. 
     $('.nanoContainer, .flexAligner .vegas-container').css('min-height', 'auto'); 
     $(".home .intro").vegas({ 
      delay: 8000, 
      transition: 'fade', 
      transitionDuration: 8e3, 
      timer: false, 
      slides: [ 
       { src: "/wp-content/uploads/slide2-0.jpg" }, 
       { src: "/wp-content/uploads/slide2-1.jpg" }, 
       { src: "/wp-content/uploads/slide2-2.jpg" } 
      ], 
      animation: "kenburns" 
     }); 
    } 
    }).resize(); 
}); 

Answer 1

당신은 오타가 있기 때문에 min-height 선언이 작동하지 않습니다 귀하의 경우 - 다른 조건에서 선택기는 동일하지 않습니다 :

if 블록에서

• : $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
• else에서 블록 : $('.nanoContainer, .flexAligner .vegas-container')

쉼표가 없습니다. 마크 업 어느 것이 의도 된 선택 자인지 알 수 없습니다. 당신은 단지 다른 중단 점에서 플러그인을 초기화하는하고 있지만 결코 다른 예를를 파괴하지 않기 때문에 .vegas()가 정상적으로 작동하지의 문제와 관련하여

, 즉. 이 경우 코드 (the plugin appears to expose a destroy function)를 참조하면 중단 점 간을 전환 할 때 인스턴스를 파괴 할 수 있습니다 (예 : $selector.vegas('destroy'). 여기

는 코드입니다 수도 일 : 당신 이후 보장이 MCVE를 제공하지 않은 내가 테스트 드릴 수 없습니다 :

$(function() { 
    $(window).resize(function() { 
    if (window.innerWidth >= 639) { 

     // Set min-height 
     windowHeight = $(window).innerHeight(); 
     $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight); 

     // Create new Vegas instance 
     $("body.home").vegas({ 
      delay: 8000, 
      transition: 'fade', 
      transitionDuration: 8e3, 
      timer: false, 
      slides: [ 
       { src: "/wp-content/uploads/slide2-0.jpg" }, 
       { src: "/wp-content/uploads/slide2-1.jpg" }, 
       { src: "/wp-content/uploads/slide2-2.jpg" } 
      ], 
      animation: "kenburns" 
     }); 

     // Destroy other Vegas instance 
     $(".home .intro").vegas('destroy'); 

    } else { 
     // This works but only if the page is loaded with the viewpoint less of 639px 
     // The min-height auto doesn't work. 
     $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', 'auto'); 

     // Create new Vegas instance 
     $(".home .intro").vegas({ 
      delay: 8000, 
      transition: 'fade', 
      transitionDuration: 8e3, 
      timer: false, 
      slides: [ 
       { src: "/wp-content/uploads/slide2-0.jpg" }, 
       { src: "/wp-content/uploads/slide2-1.jpg" }, 
       { src: "/wp-content/uploads/slide2-2.jpg" } 
      ], 
      animation: "kenburns" 
     }); 

     // Destroy other Vegas instance 
     $("body.home").vegas('destroy'); 
    } 
    }).resize(); 
});