javascript - 附加到 div 的位置跨度元素

Question

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

由于某种原因，附加的障碍物跨度被聚集到一侧，尽管我将位置设置为绝对位置并留给随机坐标。

它应该是这样的(span 是随机分布的):

这是我的代码片段，它按一定间隔生成障碍物并分配绝对定位和左定位:

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 选择器是 PITA...)

但分开来看:如果您随机创建的两个(或更多)障碍物位于相同的 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)时，值得考虑是否使用一个类。