如果JavaScript跳過其他內容？

Question

很明顯，這將是我的一個愚蠢的錯誤，因爲如果不工作，爲什麼還要別人呢？

但是，我犯了一個錯誤的地方，我找不到，現在我的JavaScript只是'跳過'我的其他如果我的代碼中的聲明。

$(window).resize(function(){ 

    if ($(window).width() <= 1080) { 
     responsiveLength = 2; 
     maxMargin = -((imgLength - responsiveLength) * imgWidth); 
     imgWrapper.css('margin-left','0'); 
    } else if ($(window).width() <= 700){ 
     console.log($(window).width()); 
     maxMargin = -((imgLength - 0) * imgWidth); 
     imgWrapper.css('margin-left','0'); 
    } else { 
     responsiveLength = 3; 
     maxMargin = -((imgLength - responsiveLength) * imgWidth);  
     imgWrapper.css('margin-left','0'); 
    } 

}); 

在此先感謝

Answer 1

您需要交換這兩個因爲700小於1080決不去那裏。

if ($(window).width() <= 700) { 
    console.log($(window).width()); 
    maxMargin = -((imgLength - 0) * imgWidth); 
    imgWrapper.css('margin-left','0'); 
} else if ($(window).width() <= 1080) { 
    responsiveLength = 2; 
    maxMargin = -((imgLength - responsiveLength) * imgWidth); 
    imgWrapper.css('margin-left','0'); 
} else { 
    responsiveLength = 3; 
    maxMargin = -((imgLength - responsiveLength) * imgWidth);  
    imgWrapper.css('margin-left','0'); 
} 

替代的解決方案，確保窗口大小比700px更多：

if ($(window).width() <= 1080 && $(window).width() > 700) { 

邏輯的解釋

讓我們在這裏考慮的邏輯。

• 屏幕尺寸：600px
  每種不超過1080？是。
  去第一個街區。

• ScreenSize：1000px
  LessThan 1080？是。
  去第一個街區。

• ScreenSize：1600px
  LessThan 1080？第
  去第三個街區。

Answer 2

排列從最低分辨率到最高分辨率的條件。

if ($(window).width() <= 700) { 
    .... 
} else if ($(window).width() <= 1080) { 
    .... 
} else { 
    .... 
} 

Answer 3

它將達不到別的，如果因爲$(window).width() <= 1080意味着$(window).width() <= 700爲好。

我想你想要做的

if ($(window).width() <= 1080 && $(window).width() > 700) { 
    responsiveLength = 2; 
    maxMargin = -((imgLength - responsiveLength) * imgWidth); 
    imgWrapper.css('margin-left','0'); 
} else if ($(window).width() <= 700){ 
    console.log($(window).width()); 
    maxMargin = -((imgLength - 0) * imgWidth); 
    imgWrapper.css('margin-left','0'); 
} else { 
    responsiveLength = 3; 
    maxMargin = -((imgLength - responsiveLength) * imgWidth);  
    imgWrapper.css('margin-left','0'); 
} 

或顛倒順序

if ($(window).width() <= 700) { 
    responsiveLength = 2; 
    maxMargin = -((imgLength - responsiveLength) * imgWidth); 
    imgWrapper.css('margin-left','0'); 
} else if ($(window).width() <= 1080){ 
    console.log($(window).width()); 
    maxMargin = -((imgLength - 0) * imgWidth); 
    imgWrapper.css('margin-left','0'); 
} else { 
    responsiveLength = 3; 
    maxMargin = -((imgLength - responsiveLength) * imgWidth);  
    imgWrapper.css('margin-left','0'); 
}