Question

我的代码完美无缺，但操作背景图片除外。我有一个图像数组存储每个页面的图像（只有2个图像，直到我采取更多，所以他们复制）。

出于某种原因，当我点击...

时图像不会改变

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

$(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文件（相对于CSS文件本身）和添加了JS的CSS（与页面本身相对）的URL的差异可能是一个原因。

我没有看到任何明显的代码语法错误或任何东西，所以除了要检查的东西，我们可能至少需要更多的代码（例如看到标记），它会是如果你能给我们一个实际复制问题的地方的链接，那就特别有帮助。

jQuery background-image url

1 个答案: