javascript - 如何同时声明很多document.getElementById变量

Question

这个问题已经有答案了:

What do querySelectorAll and getElementsBy* methods return? (12 个回答)

已关闭 5 年前。

我声明了一些变量:

var availableTile1 = document.getElementById("c1");

var availableTile2 = document.getElementById("c2");

var availableTile3 = document.getElementById("c3");

var availableTile4 = document.getElementById("c4");

var availableTile5 = document.getElementById("c5");

var availableTile6 = document.getElementById("c6");

如您所见，只有数字不同。有没有一种更快、更清晰的方法来一次定义所有变量？

注意:我听说过“解构赋值”，但我无法将其应用于 document.getElementById.6谢谢您的回答。

编辑: availableTile.style.border = "none";
availableTile.style.backgroundColor = "transparent";

如果 availableTile 是一个 Id，则这有效，但如果它是一个类，则不知何故不行？!

Answer 1

不要使用变量。一定要使用数组。将其填充到循环中。

var available_tiles = [];
for (var i = 1; i <=6; i++) {
    available_tiles.push( document.getElementById("c" + i) );
}

通过更改 HTML 使每个元素成为同一类的成员，您可以获得类似的结果。然后你可以得到一个类似数组的对象

var available_tiles = document.getElementsByClassName("tile");

或

var available_tiles = document.querySelectorAll(".tile");