Question

您好我正在尝试整理我的一些代码：

    $('#b1').css('background-image', 'url("site_images/05/1.png")');
    $('#b2').css('background-image', 'url("site_images/05/2.png")');
    $('#b3').css('background-image', 'url("site_images/05/3.png")');
    $('#b4').css('background-image', 'url("site_images/05/4.png")');
    $('#b5').css('background-image', 'url("site_images/05/5.png")');
    $('#b6').css('background-image', 'url("site_images/05/6.png")');
    $('#b7').css('background-image', 'url("site_images/05/7.png")');

它工作得非常好，但想知道是否有更好的选择或方法？

Answer 1

这样的事情：

var i;
for ( i = 1; i <= 7; i++ ) {
  $('#b' + i).css('background-image', 'url("site_images/05/' + i + '.png")');
}

Answer 2

为所有images等等

指定课程（比如说b1,b2,b3）

然后：

$(".images").each(function(){
   $(this).css('background-image', 'url("site_images/05/" + this.id.replace("b","") + ".png")');
});

Answer 3

for(var i=1; i<=7; i++){
 $('#b'+i).css('background-image', 'url("site_images/05/'+i+'.png")');
}

请注意，如果您在代码中的其他位置使用它，则会释放变量i - 范围仅在for循环中变为本地

Answer 4

替代方案：

如果这些元素具有父元素，则可以简单地使用CSS并将特定类添加到父元素。

html.bg_switched #bg1 { 
    background-image: url("site_images/05/1.png");
}

html.bg_switched #bg2 { 
    background-image: url("site_images/05/2.png");
}
...

然后：

$('html').addClass('bg_switched');

或者在某种程度上。

改变几个背景图像

4 个答案: