0

各クラス.hpCarouselに関連する背景画像を提供するこのコードを作成しました。

画像名は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では正常に動作します。クラスには、正しい背景画像が割り当てられたスタイルがあります。

ここに画像の説明を入力してください

Chrome OSX＆WIN / Safari OSX/IEでは動作しません。.hpCarouselクラスのdivにはスタイルがありません。

ここに画像の説明を入力してください

最初は、Chromeのバックグラウンド更新のバグと関係があると思いました。しかし、他のブラウザでそれを見つけると、私は別のことを考えさせられました。

私は明らかに何か間違ったことをしていますか？

これらのクラスはロード時に非表示になります。それは何か違いがありますか？次に、それらは次々にフェードインおよびフェードアウトしてカルーセルを生成します

4

1 に答える 1

0

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-04T11:55:01.767 に答える