[英]Javascript assigned CSS background-image issue
I wrote this code that gives for each class.hpCarousel the relating background image.我写了这段代码,为每个 class.hpCarousel 提供了相关的背景图像。
The image names being: 0bg.jpg, 1jpg.bg, 2bg.jpg, etc...图片名称为: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');
}
It works fine in Firefox. The classes have a style with their correct background-image assigned.它在 Firefox 中运行良好。这些类具有分配了正确背景图像的样式。
It does not work in Chrome OSX&WIN /Safari OSX/ IE.它不适用于 Chrome OSX&WIN /Safari OSX/ IE。 The.hpCarousel class divs have no style.
The.hpCarousel class div没有样式。
I thought at first it was something to do with Chrome's background refresh bug.起初我以为这与 Chrome 的后台刷新错误有关。 But finding it on other browsers has made me think otherwise.
但是在其他浏览器上找到它让我有了不同的想法。
Am I clearly doing something wrong?我显然做错了什么吗?
These classes are hidden on load.这些类在加载时隐藏。 Does that make any difference?
这有什么区别吗? Then they fade in and out after one another to produce a carousel
然后他们一个接一个地淡入淡出,产生一个旋转木马
Do you have errors in FireBug?你在 FireBug 中有错误吗? You could use another (more general) selector in the loop:
您可以在循环中使用另一个(更通用的)选择器:
$('.hpCarousel:nth-child(' + i + ')')
Also the $.each
iterator is a more convenient way to iterate through your backgrounds. $.each
迭代器也是一种更方便的遍历背景的方法。
$('.hpCarousel').each(function(index) {
$(this).css('background-image', 'url(wp-content/themes/blankslate/assets/carousel/'+index+'bg.jpg');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.