Question

<!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的值。

Answer 1

因为您试图将一维数组映射到二维字段，所以必须考虑偏移量（x轴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>

Answer 2

欢迎堆栈溢出。

您可以使用remainder来计算x（列），将Math.floor与数组的索引以及要计算y的列数结合使用。

然后使用map浏览数组一次，以从列表数组生成div数组。

您只需提供列数（x值），因为行数（y值）取决于列表数组的长度和列数。

const createDiv = (id,x,y) => {
  var box = document.createElement('div');
  box.setAttribute('id', id);
  box.className = 'box';
  box.style.left = (x*30)+'px';
  box.style.top = (y*30)+'px';
  box.innerHTML = id;
  // box.onclick = MouseClick;//you can add the click
  return box;
}
const createGame = (list,x,y) =>
  list.map(
    (id,index)=>
      createDiv(
          id,//the id from list
          index%x,//calculate x
          Math.floor(index/x)//calculate y
      )
  );

const container = document.getElementById("Spielfeld");
createGame(//this returns an array of divs
  ['ol', 'om', 'or', 'ml', 'mm', 'mr', 'ul', 'um', 'ur'],
  3//3 columns
).forEach(//for each div, append it
  div=>
    container.appendChild(div)
);

.box {
    position: absolute;
    border: solid 1px red;
    width: 25px;
    height: 25px;
    text-align: center;
}

<div id="Spielfeld"></div>

Answer 3

如果您在一个维度的arr数组中有x * y个数据，并且对第i个“行”和第j个“列”感兴趣，那么您将需要i * x + j项。原因是，您将需要跳过前i行（从第0行到第i-1行），并且每行都有y个元素，并且您需要先跳过第i列（从第0列到第j列）。

此外，您还需要确保标签的ID是唯一的。两个不同的标签具有相同的ID，会使您的HTML无效。

通过具有div ID的列表进行迭代

3 个答案: