Javascript jquery开关案例背景更改

我正试图使用jquery将背景更改为基于javascript切换情况的新URL。我做了三件事：

1） 在我的HTML文档中包含以下内容：

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

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

---

我遗漏了什么或做错了什么？

您从未删除任何类。。。如果这就像一个幻灯片，你最终会看到身体拥有所有三个类

试试这个：

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

---

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

试试这个：

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

---

首先，我没有看到计数器，所以我只能假设它没有设置。这样的函数会更简洁：

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

---

首先，我没有看到计数器，所以我只能假设它没有设置。这样的函数会更简洁：

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

---

计数器设置在哪里？我想您的开关将进入
默认值
。计数器

设置在哪里？我猜想您的交换机将进入默认状态。唯一的问题是加载每个URL/图片似乎需要很长时间（几秒钟）。你知道如何提高这方面的性能吗？你可以预加载图像。关于如何做到这一点，有很多可用的资源。好的，谢谢。是的，因为一旦我骑了一次自行车，它们就会在眨眼间加载第二次。我将四处搜索如何做到这一点。唯一的问题是加载每个URL/图片似乎需要很长时间（几秒钟）。你知道如何提高这方面的性能吗？你可以预加载图像。关于如何做到这一点，有很多可用的资源。好的，谢谢。是的，因为一旦我骑了一次自行车，它们就会在眨眼间加载第二次。我将四处寻找如何做到这一点。