位置跨度元素附加到div

Question

我正在做一个ascii滑雪免费游戏......回到Win95游戏。

由于某些原因，附加的障碍跨度被聚集到一侧，尽管我设置了绝对位置并保留在随机坐标上。

下面是它应该如何看（跨度是随机分布）：

这里是我的代码片段，在时间间隔产生的障碍，并分配绝对定位和左侧定位：

function objectFactory() { 

var randObj = Math.floor((Math.random()*7)+1), 
      randX = Math.floor((Math.random()*700)+1), 
      randY = Math.floor((Math.random()*400)+1); 

$('#myObstacles').append("<span id=\"" + randX + "\">" + items[randObj] + "</span>"); 

document.getElementById(randX).style.position = "absolute"; 
document.getElementById(randX).style.left = randX; 
document.getElementById(randX).style.top = 500; 
console.log(document.getElementById(randX).style.left); 
} 

附加的div没有被分配left位置：

下面是它应该是什么样子：

而且，console.log(document.getElementById(randX).style.left);不显示任何内容。

有什么想法？

Answer 1

你需要给单位分配给.style.left和.style.top时：

document.getElementById(randX).style.left = randX + "px"; 
document.getElementById(randX).style.top = "500px"; 

（通常情况下，我会说“或者你正在使用jQuery”，然后用一个选择的例子，但是id选择开始与数字是皮塔...）

但分开：如果两个（或更多）你随机创建的障碍是在相同的randX位置？您将最终创建与id相同的多个元素，这是无效的。

相反，正好与物体直接合作：

function objectFactory() { 
    var randObj = Math.floor((Math.random()*7)+1), 
     randX = Math.floor((Math.random()*700)+1), 
     randY = Math.floor((Math.random()*400)+1), 
     obstacle = $("<span id=\"" + id + "\">" + items[randObj] + "</span>"); 

    obstacle.css({ 
     position: "absolute", 
     left:  randX, 
     top:  500 
    }).appendTo("#myObstacles"); 

} 

附注：无论何时你发现自己有很多元素（position: absolute，top: 500px）的分配静态样式信息，这是值得看是否使用上课。