时间戳

首页 > 解决方案 > 使用 div id 遍历列表

javascript - 使用 div id 遍历列表

问题描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Beispiel</title>
<style type="text/css">
.box {
    position: absolute;
    border: solid 1px red;
    width: 95px;
    height: 95px;
    text-align: center;
}
</style>
</head>
<body>
<div id="Spielfeld"></div>

<script type="text/javascript">

var spielfeldX = 3;
var spielfeldY = 3;

var zug = 0;

function MouseClick(e) {
    this.onclick = undefined;
    zug++;
    if (zug % 2 == 0) {
        this.textContent = "X";
    }   else {
        this.textContent = "O";
    }
}
var list = new Array('ol', 'om', 'or', 'ml', 'mm', 'mr', 'ul', 'um', 'ur');
for (var y=0; y<spielfeldY; y++) {
    for(var x=0; x<spielfeldX; x++) {
            var box = document.createElement('div');
            box.setAttribute('id', list[]);
            box.className = 'box';
            box.style.left = (x*100)+'px';
            box.style.top = (y*100)+'px';
            document.getElementById("Spielfeld").appendChild(box);
            box.onclick = MouseClick;

    }
}

</script>
</body>
</html>

如何给我用 for x,y 循环创建的 div 数组的 id 值？我不知道我必须在数组的索引中输入什么。因为，当我写 x*y 或 x+y 或类似的东西时，只有几个不同的数字。我也尝试了这段代码：

for (var y=0; y<spielfeldY; y++) {
    for(var x=0; x<spielfeldX; x++) {
        var box = document.createElement('div');
        for (i=0; list.length>i; i++) {
        box.setAttribute('id', list[i]);            
        }
        box.className = 'box';
        box.style.left = (x*100)+'px';
        box.style.top = (y*100)+'px';
        document.getElementById("Spielfeld").appendChild(box);
        box.onclick = MouseClick;

    }
}

但是当我尝试这个时，div的id只是'ur'。所以我不知道如何将“列表”数组的所有值作为 div-id 的值。

标签： javascript

解决方案

因为您试图将一维数组映射到二维字段，所以您必须考虑偏移量（即 x-axis 的长度spielFeldX）。

通过将 x 轴长度乘以当前 y 轴并将位置 x 添加到其中，您将获得数组的正确索引：

y * spielfeldX + x


var spielfeldX = 3;
var spielfeldY = 3;

var zug = 0;

function MouseClick(e) {
    this.onclick = undefined;
    zug++;
    if (zug % 2 == 0) {
        this.textContent = "X";
    }   else {
        this.textContent = "O";
    }
}
var list = new Array('ol', 'om', 'or', 'ml', 'mm', 'mr', 'ul', 'um', 'ur');
for (var y=0; y<spielfeldY; y++) {
    for(var x=0; x<spielfeldX; x++) {
            var box = document.createElement('div');
            var index = y * spielfeldX + x;
            box.setAttribute('id', list[index]);
            // just for the example
            box.textContent = list[index];
            box.className = 'box';
            box.style.left = (x*100)+'px';
            box.style.top = (y*100)+'px';
            document.getElementById("Spielfeld").appendChild(box);
            box.onclick = MouseClick;

    }
}
.box {
    position: absolute;
    border: solid 1px red;
    width: 95px;
    height: 95px;
    text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Beispiel</title>
</head>
<body>
<div id="Spielfeld"></div>
</body>
</html>

推荐阅读