Javascript分配的CSS背景圖像問題

我寫了這個代碼給每個類.hpCarousel相關的背景圖像。Javascript分配的CSS背景圖像問題

圖像名稱是：0bg.jpg，1jpg.bg，2bg.jpg等..

for (i=0; i < 8; i++) { 
$('.hpCarousel:eq('+i+')').css('background-image', 'url(wp-content/themes/blankslate/assets/carousel/'+i+'bg.jpg'); 
}

它工作正常，在Firefox。這些類具有分配正確背景圖像的樣式。

enter image description here

它不會在Chrome OSX & WIN/Safari瀏覽器OSX/IE瀏覽器。 .hpCarousel類div沒有樣式。

enter image description here

我開始還以爲這是一件跟Chrome的後臺刷新錯誤。但在其他瀏覽器上查找它卻讓我覺得不然。

我明確做錯了什麼？

這些類在加載時隱藏。這有什麼區別嗎？然後他們互相淡入淡出產生旋轉木馬

來源

2012-04-04 Feeney

您是否設置了高度，寬度（可能爲100％）？你也可以嘗試使用背景而不是背景圖片 – Panagiotis 2012-04-04 11:50:19

是的，高度和寬度都被設置。更改爲「背景」而不是「背景圖像」不做任何事情。 – Feeney 2012-04-04 12:05:45

FireBug中有錯誤嗎？你可以在迴路中使用另一個（更普遍的）選擇：

$('.hpCarousel:nth-child(' + i + ')')

另外，$.each迭代器是通過你的背景來遍歷一個更方便的方法。

$('.hpCarousel').each(function(index) { 
    $(this).css('background-image', 'url(wp-content/themes/blankslate/assets/carousel/'+index+'bg.jpg'); 
});

來源

2012-04-04 11:55:01

我不知道.each中索引的用法，但這顯然是正確的選擇。謝謝 – Feeney 2012-04-04 11:58:31

順便說一句，我沒有在Firebug的錯誤。 – Feeney 2012-04-04 12:06:18

Javascript分配的CSS背景圖像問題

回答

相關問題