jquery switch case background change

我正在尝试使用jquery将背景更改为基于javascript开关的新案例。我已经做了3两件事：jquery switch case background change

1）有这在我的HTML文档：

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

2）结构的HTML文档我的开关箱（我知道是被称为），像这样：

function calcBackground() { 
switch(counter) { 
case 1: 
    $('body').toggleClass('background1'); 
    break; 
case 2: 
    $('body').toggleClass('background2'); 
    break; 
case 3: 
    $('body').toggleClass('background3'); 
    break; 
default: 
    //nothing of note here 
} 
}

3）在我的CSS将这个：

body { 
    background-repeat: no-repeat; 
    background-image:url('http://hdwallpicture.com/wp-content/uploads/2013/08/Blue-Widescreen-HD-Wallpapers.jpg'); 
    background-size: 100% auto; 
} 

body.background1 { 
    background-image:url('http://hdwallpicture.com/wp-content/uploads/2013/08/Blue-Widescreen-HD-Wallpapers.jpg'); 
} 

body.background2 { 
    background-image:url('http://3.bp.blogspot.com/-vmh1i-b3XNY/T9iTjPGKYZI/AAAAAAAAFwo/jv3Yysxcl9Q/s1600/Blue-wallpaper-23.jpg'); 
} 

body.background3 { 
    background-image:url('http://wallpaper4god.com/wallpapers/blue_1269_1076x768.jpg'); 
}

注：body.background1的URL是一样的默认网址backgrou为故意的页面。在调用switch语句时，背景没有改变。

我在想什么或做错了什么？

来源

2013-10-24 Kevin Banas

哪里是'counter'设置？我想你的开关正在进入'默认'。 – Prisoner

你永远不会删除任何类......如果这就像一个幻灯片，你最终会得到与所有三个类的身体。

试试这个：

function calcBackground() { 
    switch (counter) { 
     $('body').removeClass('background1 background2 background3'); 
     case 1: 
      $('body').addClass('background1'); 
      break; 
     case 2: 
      $('body').addClass('background2'); 
      break; 
     case 3: 
      $('body').addClass('background3'); 
      break; 
     default: 
      //nothing of note here 
    } 
}

来源

2013-10-24 15:54:16

宾果。谢谢！ –

唯一的问题是，它似乎需要很长时间（几秒钟）来加载每个URL /图片。任何想法如何提高这方面的表现？ –

您可以预加载图像。有关如何做到这一点的资源很多。 –

首先，我看不出有什么counter，所以我只能假设它不设置。像这样的功能会更清洁：

function calcBackground() { 
    if(typeof counter !== 'undefined'){ 
     $('body').removeClass('background1 background2 background3') 
       .addClass('background' + counter); 
    } 
}

，或者，如果你的身体有（和将永远）有任何其他类：

function calcBackground() { 
    if(typeof counter !== 'undefined'){ 
     $('body').attr('class', 'background' + counter); 
    } 
}

来源

2013-10-24 15:55:31 Prisoner

jquery switch case background change

回答

相关问题