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

回答

相關問題