javascript - 使用 jQuery 动态应用的背景图像消失

Question

我已经遍历了使用 jQuery 在正文中执行背景图像更改的几乎所有选项，并且一遍又一遍地遇到同样的事情。背景图片出现一闪就消失了。
在代码中，我包含了一些用于暂停页面的 javascript 警报，并且背景图像在警报被击中时出现并且看起来很棒，但是在我单击确定按钮以通过警报之后，图像消失了。我最初使用警报来确保我获得了正确的值。有谁知道为什么背景图像不会“粘住”？我当前的代码如下 - 我已经尝试使用在网络上找到的许多不同代码块进行此操作，但仍然无法更改 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"。