使用外部js文件設置背景圖像

Question

我有一個問題，通過使用外部js代碼設置我的bacground圖像。 這是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);
});