Question

我正在尝试使用图片制作背景主题。现在，我只想尝试一下，但我打算制作这些（和其他）瓷砖的整体景观。我要做的是将新的s添加到HTML中，但使用style="left:$tleft; etc;“

这是在Jquery下：

var $tleft = 0;
var $newTerrain = $('<img id=$tleft, style="height:100px; width:100px; left:$tleft; top:0; display:inline-block; position:relative;", src="http://i.imgur.com/bb3aCjO.png">');
var $etc

并在文档内部。我已经：

while($tleft<=600) {
    $newTerrain.appendTo('#Terrain'); 
    $tleft+=100;

    console.log("Terrain placed? "+$tleft);
}

我希望它会放置6个newTerrain图像，每个图像距离左边100px因为newTerrain var中的"left:$tleft"，但显然情况并非如此。请帮忙！

Answer 1

您需要克隆要追加的对象。您还需要使用offset或css jquery方法更新位置。

Take a look at this jsfiddle to see what i mean

$(document).ready(function () {
var tile = $('<img src="http://i.imgur.com/bb3aCjO.png">');
var root = $('#Terrain');

for (var y = 0; y < 100; y += 20) {
    for (var x = 0; x < 100; x += 20) {
        var p={top: y,left: x};
        var stamp = tile.clone();            
        root.append(stamp);
        stamp.offset(p);
    }
}
});

Answer 2

据我所知，jQuery没有任何模板引擎，因此尝试的变量插值（<img id=$tleft'）将不起作用。您需要在循环中设置左侧值。请参阅此bin：http://jsbin.com/cujiyaro/2/edit

Jquery附加多个图像

2 个答案: