Javascript zugewiesen CSS background-image Ausgabe

Question

Ich schrieb diesen Code, der für jede Klasse gibt .hpCarousel die im Zusammenhang Hintergrundbild. Namen

wobei das Bild: 0bg.jpg, 1jpg.bg, 2bg.jpg, etc ...

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

Es in Firefox funktioniert. Die Klassen haben einen Stil mit dem richtigen Hintergrundbild zugewiesen.

Es funktioniert nicht in Chrome OSX & WIN/Safari OSX/IE. Die Divs der Klasse .hpCarousel haben keinen Stil.

Ich dachte zuerst war es etwas mit Chrome Hintergrund Refresh-Fehler zu tun. Aber es in anderen Browsern gefunden zu haben, hat mich anders denken lassen.

Mache ich eindeutig etwas falsch gemacht?

Diese Klassen werden auf Last versteckt. Macht das einen Unterschied? Dann verblassen sie in und aus hintereinander ein Karussell zu erzeugen

Answer 1

Haben Sie Fehler in FireBug haben? Sie könnten eine weitere (allgemeinere) Wähler in der Schleife verwenden:

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

Auch die $.each Iterator ist ein bequemer Weg durch Ihre Hintergründe zu durchlaufen.

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