Javascript 分配的 CSS 背景图像问题

Question

我编写的这段代码为每个类 .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 的后台刷新错误有关。但是在其他浏览器上找到它让我有了不同的想法。

我显然做错了什么吗？

这些类在加载时隐藏。这有什么区别吗？然后他们一个接一个地淡入淡出，产生一个轮播

Answer 1

你在 FireBug 中有错误吗？ 您可以在循环中使用另一个(更通用的)选择器:

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

此外，$.each 迭代器是一种更方便的遍历背景的方法。

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