Question

我试图根据对象的属性来更改div的背景色，但是我仍然坚持如何检查每个对象的属性。

总共5x5 25个对象的二维数组：

let tab = [[object{bombe: false}, object{bombe: false}, object{bombe: 
true}, object{bombe: false}, object{bombe: true}], [object{bombe: 
false}, ...

用于创建HTML表并为每个div设置一个带有2个数字的ID的功能：

function afficher() {
  for (let i = 0; i < 5; ++i) {
    for (let j = 0; j < 5; ++j) {
      let element = document.createElement("div");
      element.innerHTML = "&nbsp;";
      element.id = `${i}${j}`;
      document.body.appendChild(element);
    }
    document.write("<br>");
  }
}

添加一个函数，该函数将根据'bombe'属性向div添加一个类：

let cellules = document.querySelectorAll("div");
cellules.forEach(c => c.addEventListener("click", jeu));
 function jeu() {
  if (this.id.bombe) {
   this.setAttribute("class", "red");
   cellules.forEach(c => c.removeEventListener("click", jeu));
  } else {
   this.setAttribute("class", "grey");
 }
}

我知道这段代码将显示true或false，但这仅适用于一个对象...：

let x = tab[0][0].bombe
console.log(x);

我能用forEach做到吗？

Answer 1

您可以使用类似：

function afficher(tab) {
  tab.forEach( (row, i) => {
    row.forEach( (obj, j) => {
       let element = document.createElement("div");
       element.innerHTML = "&nbsp;";
       element.id = `${i}${j}`;
       document.body.appendChild(element);
    });
    document.write("<br>");
  });
}

请注意，使用tab时必须传递afficher作为参数

Answer 2

如果我正确地回答了您的问题，您希望基于存储在变量中的颜色图将某些样式应用于div的二维数组。如果不使用jQuery，我会走懒的方式：操纵innerHTML而不是DOM对象并一次呈现所有内容（在一个函数中）。您可能会在下面找到一个示例：

var matrix = [[{attr:false}, {attr:false}, {attr:true}, {attr:false}, {attr:true}],
[{attr:true}, {attr:false}, {attr:false}, {attr:true}, {attr:true}],
[{attr:false}, {attr:true}, {attr:true}, {attr:false}, {attr:false}],
[{attr:false}, {attr:false}, {attr:true}, {attr:false}, {attr:false}],
[{attr:true}, {attr:true}, {attr:false}, {attr:true}, {attr:false}]]

var renderer = (arg) => {
	arg.forEach((row,rownum) => {
		document.querySelector('#box').innerHTML += '<div class="row" rownum="'+rownum+'">';
		row.forEach((cell,cellnum) => {
			let conditionalClass = cell.attr ? 'grey' : 'red';
			document.querySelector('[rownum="'+rownum+'"]').innerHTML += '<div class="cell '+conditionalClass+'" cellnum="'+cellnum+'">'
		});
		document.querySelector('#box').innerHTML += '</div>';
	});

};

renderer(matrix);

.row {
    height: 30px;
}
.cell {
    width: 30px;
    height: 100%;
    float: left;
}
.red {
  background-color: red;
}
.grey {
  background-color: grey;
}

<div id="box"></div>

如何使用forEach（）在二维数组中选择对象的属性？

2 个答案: