使用jQuery動態應用的背景圖片消失了

Question

我已經遍歷了使用jQuery在主體中執行背景圖像更改的每個選項，並且一次又一次地遇到相同的問題。 背景圖像在那里閃爍並消失。
在代碼中，我包含了一些Javascript警報來暫停頁面，並且背景圖像已啟動，並且在敲擊警報時看起來不錯，但是在單擊“確定”按鈕跳過警報之后，圖像消失了。 我最初使用警報來確保獲得正確的值。 有誰知道為什么背景圖像不會“粘住”？ 我當前的代碼如下-我已經嘗試了在Web上找到許多不同代碼塊的方法，但所有代碼塊仍無法更改bg圖像。 非常感謝！

var bg1 = "url(/images/bg1.jpg)";
var bg2 = "url(/images/bg2.jpg)";
var bg3 = "url(/images/bg3.jpg)";

$("nav a").click(function () {
    var id = $(this).attr("id");
    //alert(id);

    switch (id) {
        case "home":
            $('body').css({ backgroundImage: bg1 });
            //alert("case - home");
            break;
        case "about":
            $('body').css({ backgroundImage: bg2 });
            //alert("case - about");
            break;
        default:
            $('body').css({ backgroundImage: bg3 });
            break;
    }
});

Answer 1

假設您在其他地方沒有錯誤，則問題出在您的CSS屬性上，該屬性應用字符串引起來：

var bg1 = "url(/images/bg1.jpg)";
var bg2 = "url(/images/bg2.jpg)";
var bg3 = "url(/images/bg3.jpg)";

$("nav a").click(function () {
    var id = $(this).attr("id");
    //alert(id);

    switch (id) {
        case "home":
            $('body').css({ "background-image": bg1 });
            //alert("case - home");
            break;
        case "about":
            $('body').css({ "background-image": bg2 });
            //alert("case - about");
            break;
        default:
            $('body').css({ "background-image": bg3 });
            break;
    }
});

我所做的只是將backgroundImage更改為"background-image" 。