0

jquery を使用して、javascript スイッチ ケースに基づいて背景を新しい URL に変更しようとしています。私は3つのことをしました：

1）これをHTMLドキュメントに入れます：

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

2) 次のように、HTML doc で 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 の URL は、ページのデフォルトの URL 背景と意図的に同じです。ただし、switch ステートメントが呼び出されても、背景は変化しません。

私は何が欠けているか、間違っていますか?

4

2 に答える 2

3

クラスを削除することは決してありません...これがスライドショーのようなものである場合、最終的にはボディに 3 つのクラスすべてが含まれることになります。

これを試して：

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-24T15:54:16.183 に答える
1

まず、 no が表示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-24T15:55:31.630 に答える