j查询开关案例背景更改

Question

我正在尝试使用 jquery 根据 javascript 切换案例将背景更改为新 URL。我做了 3 件事：

1）在我的HTML文档中有这个：

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

2）在HTML文档中构建我的Switch案例（我知道正在调用），如下所示：

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 的网址与网页的默认网址背景相同。不过，调用 switch 语句时背景不会改变。

我错过了什么或做错了什么？

Answer 1

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

试试这个：

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
    }
}

Answer 2

首先，我没有看到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);
    }
}