響應式網站的jQuery媒體查詢

Question

我想創建一個包含3個不同jQuery滑塊的網站。所有三個滑塊包含不同的圖片。我試圖使用if和else，但它不起作用。這是我的代碼。

JS

<script> 
    $(document).ready(function(){ 
     if($(window).width() > 786){     
      $('.bxslider').bxSlider({ 
       auto: true, 
       autoControls: true 
      });     
     }else $(window).width() > 478){ 
      $('.bxslider').bxSlider({ 
       auto: true, 
       autoControls: true 
      }) ;    
     } else { 
      $('.bxslider').bxSlider({ 
       auto: true, 
       autoControls: true 
      }) ; 
     } 
    }); 
</script> 

的Html

<ul class="bxslider foto"> 
    <li><img src="img/Hoofd.jpg"/></li> 
    <li><img src="img/deviceGrootMobiel.jpg"/></li> 
</ul> 
<ul class="bxslider portret"> 
    <li><img src="img/portret.jpg"/></li> 
    <li><img src="img/devicesGrootTablet.jpg"/></li> 
</ul> 
<ul class="bxslider vision"> 
    <li><img src="img/vision.jpg"/></li> 
    <li><img src="img/devicesGrootLaptop.jpg"/></li> 
</ul> 

Answer 1

不能使用其他類似的。

使用開關來代替：

switch($(window).width()){ 
    case 786 : //your code 
    break; 
    case 478: //your code 
    break; 
    default: //your code 
    break; 
} 

這將是無用的，因爲你有3次同樣的代碼，但是代碼本身不會有錯。

下一次請RTFM。

Answer 2

你有一個語法錯誤的位置：

}else $(window).width() > 478){ 

您需要創建一個新的if檢查，以及開放的括號內。當然你的JavaScript控制檯告訴你這一點。我想你的意思是：

} else if ($(window).width() > 478) { 

然而，幾件事情需要注意：

1. 所有這三個你的條件塊來完全一樣的東西，所以沒有必要爲有條件的。
2. 在每種情況下，您都針對所有三個ul元素。你的意思是隻針對每一個？
3. 如果瀏覽器重新調整大小，則不會改變，因爲您只在頁面加載時檢查大小。

使用CSS media queries來顯示/隱藏/更改元素往往比這種方法更有效。