javascript - 使用外部js文件设置背景图片

Question

我在使用外部 js 代码设置免费图像时遇到问题。这是js的代码:

$(document).ready()
{
mazdaArr = new Array();
    for (i=1;i<6;i++)
    {
        mazdaArr[i-1]= new Image();
        mazdaArr[i-1].src = 'mazda/mazda'+[i]+'.jpg';
    }   
    $('mainContent').css('background-image','url(/mazda/mazda4.jpg)');
    $('mainContent').css('background-image', 'url(' + mazdaArr[3].src + ')');
    console.log(mazdaArr[3].src);
}

一切正常，但 css attr 除外，因为我可以在控制台看到正确的链接，当我单击它时，图像将在新标签中打开。据此我猜 html 页面的 jquery 调用没问题。

找不到这里出了什么问题...

Answer 1

一些事情:

• 看起来你的字符串是在连接一个数组文字，而不是整数 i。所以 'string'+[]+'string' 实际上是 'string' + new Array() + 'string'。
• mainContent 的选择器需要查找类或 ID，因此可以是 .mainContent 或 #mainContent。
• 最后，您无需实例化新的 Image，因为 jQuery 只会使用 background-image 属性的新字符串更新元素的 CSS。

尝试

$(document).ready(function() {
    var mazdaArr = [],
        i = 0;
    for (i; i<5; i++) {
        mazdaArr[i] = 'mazda/mazda'+ i +'.jpg';
    }   

    $('#mainContent').css('background-image', 'url(' + mazdaArr[3] + ')');

    console.log(mazdaArr[3].src);
});