Question

不是一次又一次地写这样的线条，应该是什么样的专业方式＆amp;优化的方法来编写相同的代码？请帮忙

$(function(){

$('<img src="map/map_slice_1.jpg"/>').appendTo('#map_slice_1');
$('<img src="map/map_slice_2.jpg"/>').appendTo('#map_slice_2');
$('<img src="map/map_slice_3.jpg"/>').appendTo('#map_slice_3');
$('<img src="map/map_slice_4.jpg"/>').appendTo('#map_slice_4');
$('<img src="map/map_slice_5.jpg"/>').appendTo('#map_slice_5');
$('<img src="map/map_slice_6.jpg"/>').appendTo('#map_slice_6');
$('<img src="map/map_slice_7.jpg"/>').appendTo('#map_slice_7');
$('<img src="map/map_slice_8.jpg"/>').appendTo('#map_slice_8');             

});

Answer 1

$('[id^="map_slice_"]').append(function() { 

  return $('<img />', {src: 'map/' + this.id + '.jpg'});

});

Try Fiddle

Answer 2

尝试

$(function(){
  for (var i=0; i<8; i++)
  {
     $('<img src="map/map_slice_" + i + ".jpg"/>').appendTo('#map_slice_' + i);
  }   

});

Answer 3

对于优化不确定，但是为了可维护性和行数：

for(var i=1; i<=8 i++) {
  $('<img src="map/map_slice_'+i+'.jpg"/>').appendTo('#map_slice_'+i);
}

有可能找到更好的方法来实现这一目标。了解背景可能有所帮助。

Answer 4

我会做这样的事情：

$(function () {
    var i = 0; 
    while (i++ < 8) {
        $('#map_slice_' + i).append(
            '<img src="map/map_slice_' + i + '.jpg"/>'
        );
    }
});

优化我的jquery的建议

4 个答案: