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) {

但是，有几点需要注意：

完全相同的所有三个条件块，因此根本不需要条件。

在每种情况下，您都会定位所有三个ul元素。你的意思是每个目标只有一个吗？

如果浏览器重新调整大小，则不会发生任何变化，因为您只检查页面加载时的大小。

使用CSS media queries显示/隐藏/更改元素往往比这种方法更有效。

jQuery媒体查询响应式网站

2 个答案: