jquery - 改变几个背景图像

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');

或者这种程度的东西。