javascript - 我的脚本可以完美运行，直到将其包装在if(screen.width <980){}语句中以检查屏幕尺寸之前

@约翰

好吧，我混淆了大于符号。简单的事情...。我要做的事情是，只有在browser.width()> 941px(如果页面大小调整为 = 941px，请打开codeMagic()。然后，如果页面加载的图像少于941px，则不要运行codeMagic()，而要保持调整大小的意识。

这是我的示例代码:

CSS:

<style>
    body { margin: 0; }
    footer { padding: 10px; margin: 10px; height: 100%; }
  </style>

HTML:

<div id="home">home!</div>
<footer>footer!</footer>

<script src='lib/js/vendor/jquery.js'></script>
<script src='../den.js'></script>

JS:

jQuery( document ).ready(function($) {
// set element height based on 'window height' - 'footer height'

function codeMagic() {

    var docHeight = parseInt($( window ). height());
    var footerHeight = parseInt($( 'footer' ).outerHeight( true ));
    var homeHeight = +docHeight - +footerHeight + 'px';

        $( 'body #home' ).height(homeHeight);
        console.log( homeHeight, footerHeight);
};

if (jQuery(window).width() >= 941) {

codeMagic(); // init codeMagic

//Set codeMagic to run on browser resize
$( window ).resize( function() {

    codeMagic();

    });
   }
});

正确的方法是什么？

最佳答案

如果浏览器的大小大于DOM init上的941 px，则不会触发您的resize事件，因为您没有绑定(bind)它。您需要像下面这样更改它:

if (jQuery(window).width() >= 941) {
  codeMagic(); // init codeMagic
}


//afterwards bind to the resize event
$( window ).resize( function() {
  //check size again
  if (jQuery(window).width() >= 941) {
    codeMagic();
  }
});