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

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

2 个答案: