如果else不能使用window.resize（）

Question

如果我調整窗口大小，其他方法無法正常工作。

當我加載文檔時，庫是第一次完美地工作。 但是，當我調整瀏覽器窗口大小以檢查響應性時，即使我已經編寫了window.resize（）的代碼，它也會顯示出未預期的結果。 請點擊以下代碼：

/*gallery*/
        windowWidth = $(window).width();
        var count = 0;
        var liMobCount = $('#gallery-xs ul li').length;
        var liMobWidth = $('#gallery-xs ul li').outerWidth(true);
        var ulMobWidth= liMobCount*liMobWidth;
        var thumbDisplay = 1;
        $('.prev-arrow').addClass('disable');
        $("#gallery-xs ul").css({"width": ulMobWidth}); 


        var liCount = $('#gallery ul li').length;
        var liWidth = $('#gallery ul li').outerWidth(true);
        var ulWidth= liCount*liWidth;
        var counter = liCount - 4;
        var counter1 = 0;
        $("#gallery ul").css({"width": ulWidth});


if(windowWidth<=765){

    $(".prev-arrow").click(function () {
       if(count > 0){
           count--;
           $("#gallery-xs ul").stop(true, true).animate({"left": "+=" + liMobWidth});
           if(count<liMobCount){
                $('.next-arrow').removeClass('disable');
            }       
           if(count == 1){
                $('.prev-arrow').addClass('disable');
            }
        }

    });

   $(".next-arrow").click(function () {
       $('.prev-arrow').removeClass('disable');
       if(count < (liMobCount-thumbDisplay)){
               count++;
               $("#gallery-xs ul").stop(true, true).animate({"left": "-=" + liMobWidth});
               if(count==(liMobCount-thumbDisplay)){
                    $(this).addClass('disable');
                }
       }
    });

    }
        else
    {

    $(".prev-arrow").click(function () {
           if(counter1 > 0){
               counter1--;
               if(counter1 < counter){
                      $('.next-arrow').removeClass('disable');
               }
               if(counter1 == 0){
                      $('.prev-arrow').addClass('disable');
               }
               $("#gallery ul").stop(true, true).animate({
                       "left": "+=" + liWidth
               });

           }

    });


    $(".next-arrow").click(function () {
    $('.prev-arrow').removeClass('disable');
           if(counter1 < counter){
               counter1++;
               if(counter1 >= counter){
                       $('.next-arrow').addClass('disable');
               }
               $("#gallery ul").stop(true, true).animate({
                       "left": "-=" + liWidth      
               });
            }
        }); 

    }


$(window).resize(function(){



    if(windowWidth<=765){

        count = 0;
        liMobCount = $('#gallery-xs ul li').length;
        liMobWidth = $('#gallery-xs ul li').outerWidth(true);
        ulMobWidth= liMobCount*liMobWidth;
        thumbDisplay = 1;
        $('.prev-arrow').addClass('disable');
        $("#gallery-xs ul").css({"width": ulMobWidth});
        $("#gallery-xs ul").stop(true, true).animate({"left": "0"});
        }
          else
        {

        liCount = $('#gallery ul li').length;
        liWidth = $('#gallery ul li').outerWidth(true);
        ulWidth= liCount*liWidth;
        counter = liCount - 4;
        counter1 = 0;
        $("#gallery ul").css({"width": ulWidth});

        $("#gallery ul").stop(true, true).animate({"left": "0"});
        $('.prev-arrow').addClass('disable');
            if($('.next-arrow').hasClass('disable')){
                $('.next-arrow').removeClass('disable');
            }
        }   
});
/*gallery*/

Answer 1

windowWidth = $(window).width();

在window.resize（）函數之外計算，調整窗口大小時該值不會改變...

Answer 2

windowWidth變量的值永遠不會在resize處理程序內部更新，因此它始終針對原始值進行評估。

你最好在處理程序中使用$(this).width() ，如下所示：

$(window).resize(function(){

    if( $(this).width() <= 765 )
    {
        // something here...
    }
});