我在某些屏幕尺寸上禁用了某些jQuery腳本，但是如何在調整屏幕尺寸時檢查它？

Question

我在1020以下的屏幕尺寸上禁用了此功能，但是不知道如何在調整瀏覽器窗口大小時使其動態檢查嗎？：

<script>
$(document).ready(function() {

/*Set height of sections to window height*/
$( "#homepage-fold" ).each(function(){
if ($(window).width() >= 1020) {
    var $this = $(this);}
    $this.css({'height':($(window).height())+'px'});

    /*Recalculate on window resize*/
$(window).resize(function(){
        $this.css({'height':($(window).height())+'px'});
    });
 });

 });</script>

任何想法如何使我添加的if語句在調整瀏覽器大小時都能動態工作。 我嘗試在第二個“ 重新計算”部分中將第一個if標簽包裝起來，但是我一定不能將其放在正確的位置。

謝謝！！

-

首先，這似乎是一個簡單的解決方案，但我嘗試過的解決方案沒有用。 我是jQuery的新手，所以我猜測這是我的語法錯誤-可能是該規則的放置不當。 如果有人可以幫助我弄清楚如何使它工作，我將不勝感激。 我只希望此腳本在大於1020px的屏幕上有效。 1020以下的屏幕應該看到沒有此活動腳本的頁面。

   <script>
   $(document).ready(function() {

    /*Set height of sections to window height*/
    $( "#homepage-fold" ).each(function(){
        var $this = $(this);
        $this.css({'height':($(window).height())+'px'});

        /*Recalculate on window resize*/
        $(window).resize(function(){
            $this.css({'height':($(window).height())+'px'});
        });
    });

});</script>

我想通過添加

    if(screen.width >= 1020){

像這樣：$（document）.ready（function（）{

    /*Set height of sections to window height*/
    $( "#homepage-fold" ).each(function(){

if（screen.width> = 1020）{

        var $this = $(this);
        $this.css({'height':($(window).height())+'px'});

        /*Recalculate on window resize*/
        $(window).resize(function(){
            $this.css({'height':($(window).height())+'px'});
        });

添加： }）; }）;

});</script>

我在哪里弄亂了這段代碼有什么想法？ 謝謝！！

Answer 1

這就是我的方法。 setFold函數將所需元素的高度設置為窗口的高度，或者-如果窗口的寬度小於斷點（1020），則將其設置為默認值（999）。 我還將onresize回調包裝為一個超時，該超時將延遲其執行，直到resize事件實際結束為止（因此實際上使它成為一個onresizeend ）。 有時這是一個好主意，因為在有人調整窗口resize會多次觸發調整大小。 根據onresize這可能會導致相當大的滯后，並且在大多數情況下，僅在用戶停止調整大小時發生一次是完全可以的（您可以在此處使用callbackDelay或完全刪除超時內容）。

$(document).ready(function(){

    // DOM READY
    var $window    = $(window), // cached
        $fold      = $('#homepage-fold'),
        breakpoint = 1020,
        defaultHeight = 999,
        resizeTimeout,
        callbackDelay = 200; // ms


    function setFold(){
        if( $window.width() < breakpoint ){
            $fold.css('height', defaultHeight );
        }
        else {
            $fold.css('height', $window.height() );
        }
    }

    setFold(); // initial setting

    // Attach event
    $window.on('resize', function(){
        clearTimeout( resizeTimeout );
        resizeTimeout = setTimeout(function(){
            setFold();
        }, callbackDelay );
    })

});

Answer 2

像這樣做：

if ($(window).width() >= 1020) {

}

另外，您可能還希望將其寫入調整大小函數，以便如果有人調整瀏覽器窗口的大小，腳本將根據調整大小而不是僅基於初始尺寸觸發或不觸發。