javascript - jQuery 背景图像 url

Question

我的代码运行完美，除了处理背景图像。我有一个图像数组存储每个页面的图像(只有 2 张图像，直到我拍摄更多图像，所以它们会重复)。

出于某种原因，当我点击时图像没有改变...

此外，'info' 是一个包含页面名称的字符串(这是我的较大脚本的一小部分)。并且背景颜色变化效果很好，只有图像没有。

$(function () {
var pages = ["home", "about", "portfolio", "misc", "inquire"];

//Finding page corresponding to clicked link
function SetRequest (link, pages)
{
    lookingFor =  ".home";

    for (var i in pages)
    {
        if (link.hasClass(("." + pages[i]).toString()))
        {
            lookingFor = pages[i];
        }
    }

    return lookingFor;
}

//Hiding all other pages, showing page needed
//Also manages hero images/background colours
function ShowCurrentPage (page, pages, lookingFor)
{
    console.log(page, pages, lookingFor);
    if (page.hasClass("." + lookingFor))
    {
        $(".current").animate({opacity: 0}, 600);
        $(".current").removeClass("current");
        $("." + lookingFor).animate({opacity: 1}, 600);
        $("." + lookingFor).addClass("current");
    }

    SetHeroStuffYo(lookingFor);
}

function SetHeroStuffYo (info) {
    images = ['../images/index/hero-image.png', '../images/hero/car.jpg'];

    if (info == "home")
    {
        $("#hero-bg").css({'background-image' : 'url(' + images[0] + ')'});
        $("#heroColour").css({'background-color' : 'black', opacity : 0});
    }
    else if (info == "about")
    {
        $("#hero-bg").css({'background-image' : 'url(' + images[1] + ')'});
        $("#heroColour").css({'background-color' : 'red', opacity : 0.2});
    }
    else if (info == "portfolio")
    {
        $("#hero-bg").css({'background-image' : 'url(' + images[0] + ')'});
        $("#heroColour").css({'background-color' : 'lightgreen', opacity : 0.2});
    }
    else if (info == "misc")
    {
        $("#hero-bg").css({'background-image' : 'url(' + images[1] + ')'});
        $("#heroColour").css({'background-color' : 'cyan', opacity : 0.2});
    }
    else if (info == "inquire")
    {
        $("#hero-bg").css({'background-image' : 'url(' + images[0] + ')'});
        $("#heroColour").css({'background-color' : 'yellow', opacity : 0.2});
    }
}

$(".nav-link a").click(function(){
    ShowCurrentPage($(this), pages, SetRequest($(this), pages));
});});

Answer 1

使用浏览器工具检查是否实际添加了 css 样式(它将在 style 属性中)。然后使用浏览器工具确保在查找图像时没有错误(如 404 未找到错误)。来自 CSS 文件的 URL(相对于 CSS 文件本身)和添加了 JS 的 CSS(相对于页面本身)的差异可能是一个原因。

我没有看到任何明显的代码语法错误或任何东西，所以除了这些要检查的东西之外，我们可能至少需要更多代码(例如查看标记)，如果您可以给我们一个指向实际复制问题的地方的链接。