Question

寻找合并此HTML的方法：

<button style="height:50px;width:50px" id="s11" onclick="s11()">O</button>
<button style="height:50px;width:50px" id="s12" onclick="s12()">O</button>
<button style="height:50px;width:50px" id="s13" onclick="s13()">O</button>
<button style="height:50px;width:50px" id="s14" onclick="s14()">O</button>
<button style="height:50px;width:50px" id="s15" onclick="s15()">O</button><br>
<button style="height:50px;width:50px" id="s21" onclick="s21()">O</button>
<button style="height:50px;width:50px" id="s22" onclick="s22()">O</button>
<button style="height:50px;width:50px" id="s23" onclick="s23()">O</button>
<button style="height:50px;width:50px" id="s24" onclick="s24()">O</button>
<button style="height:50px;width:50px" id="s25" onclick="s25()">O</button><br>
<button style="height:50px;width:50px" id="s31" onclick="s31()">O</button>
<button style="height:50px;width:50px" id="s32" onclick="s32()">O</button>
<button style="height:50px;width:50px" id="s33" onclick="s33()">O</button>
<button style="height:50px;width:50px" id="s34" onclick="s34()">O</button>
<button style="height:50px;width:50px" id="s35" onclick="s35()">O</button><br>
<button style="height:50px;width:50px" id="s41" onclick="s41()">O</button>
<button style="height:50px;width:50px" id="s42" onclick="s42()">O</button>
<button style="height:50px;width:50px" id="s43" onclick="s43()">O</button>
<button style="height:50px;width:50px" id="s44" onclick="s44()">O</button>
<button style="height:50px;width:50px" id="s45" onclick="s45()">O</button><br>
<button style="height:50px;width:50px" id="s51" onclick="s51()">O</button>
<button style="height:50px;width:50px" id="s52" onclick="s52()">O</button>
<button style="height:50px;width:50px" id="s53" onclick="s53()">O</button>
<button style="height:50px;width:50px" id="s54" onclick="s54()">O</button>
<button style="height:50px;width:50px" id="s55" onclick="s55()">O</button><br>

为Lights Out程序制作5x5正方形

考虑将其设为9x9，但它会使代码为81行而不是25行。有什么办法来整合HTML？

Answer 1

你需要从一个循环开始然后将您的功能更改为通过按钮的ONE功能 - 您可以从中访问其ID。

function clicked(but) {
  var color = but.classList.contains("blue")?"blue":"red";
  but.classList.toggle("blue");
  but.classList.toggle("red");
  console.log("You clicked button "+but.id, "color:"+color);
}
var gridSize = 9, buttons=[], array_of_ids=[];
for (var i=1;i<=gridSize;i++) {
  for (var j=1;j<=gridSize;j++) {
    id = 's'+i+''+j;
    buttons.push('<button type="button" onclick="clicked(this)" id="'+id+'" class="but blue">&nbsp;</button>');
    array_of_ids.push(id);
    if (j==gridSize) buttons.push('<br/>');
  }  
}
document.querySelector("#container").innerHTML=buttons.join("")

.but {height:50px;width:50px;}
.blue {background-color:blue}
.red {background-color:red}

<div id="container"></div>

合并HTML代码<button>

1 个答案: