JavaScript 创建变量并使用循环为它们赋值

Question

我创建了一个包含以下代码的脚本:

var position = 1;
var backButton = document.getElementById("theBackButton");
var nextButton = document.getElementById("theNextButton");
var introPos = document.getElementById("introductionText");
var posOne = document.getElementById("positionOne");
var posTwo = document.getElementById("positionTwo");
var posThree = document.getElementById("positionThree");
var posFour = document.getElementById("positionFour");
var posFive = document.getElementById("positionFive");
var posSix = document.getElementById("positionSix");
var posSeven = document.getElementById("positionSeven");
var posEight = document.getElementById("positionEight");
var posNine = document.getElementById("positionNine");
var posTen = document.getElementById("positionTen");
var posEleven = document.getElementById("positionEleven");

每个位置包含不同的内容，我使用按钮在每个位置之间移动。该脚本工作得很好，但我想知道是否有更有效的方法来生成这些变量并将它们分配给这些值？我不得不做很多这种类型的工作，在我尝试学习 JavaScript 的过程中，我读到一些大意是“如果你发现自己不得不一遍又一遍地编写相同类型的代码，你可能不会这样做没错。”

我提前知道我将拥有多少职位，并且我认为我可以使用循环来执行此操作，但我不确定。我希望得到的结果是一堆变量 [posOne, posTwo, posThree, etc] 对应的值是 document.getElementById("positionOne");

谢谢。

Answer 1

不是将 posOne 手动编码为 posEleven 或任何您需要迭代的代码，而是将数字字符串更改为数字:

 var position = 1;
 var totalPositions=11;
 var backButton = document.getElementById("theBackButton");
 var nextButton = document.getElementById("theNextButton");
 var introPos = document.getElementById("introductionText");

 var totalPositions=11;
 var pos=[];

 for (i=1; i<=totalPositions; i++) {
        pos[i] = 'pos'+i+'= document.getElementById("position'+i+'")';
 }

 console.log(pos);

需要更改您的 DOM 元素 id，例如 div id 或您要操作的任何内容。

请密切注意 console.log，可能在您不再需要时删除。