JavaScript 创建变量并使用循环为其赋值答案

【问题标题】：JavaScript creating variables and assigning them a value using a loopJavaScript 创建变量并使用循环为其赋值
【发布时间】：2016-04-28 05:45:46
【问题描述】：

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

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");

谢谢。

【问题讨论】：

标签： javascript loops variables

【解决方案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，可能在您不再需要后将其删除。

【讨论】：

我试过这个，我得到一个错误，指出“Uncaught SyntaxError: Unexpected token +
这是我的代码：
这里是介绍文本

content1
p>
content2

content3
@user3822485 我正在检查
也许我只是不明白，但这不只是创建一个充满字符串的数组吗？我实际上没有任何变量，对吧？

【解决方案2】：

 var positions = new Object();
 var arrIds = ["positionOne","positionTwo","positionThree","positionFour","positionN"]

 for (var position in arrIds){     
     var id = arrIds[position];
     positions[id] = document.getElementById(id);
 }

 console.log(positions["positionOne"])

【讨论】：

【解决方案3】：

也许不要太依赖 ID，而是使用通用类或选择器来查找您的位置，使用 document.getElementsByClassName('position');。

【讨论】：

【解决方案4】：

您可能会考虑的一种方法是，您可以在标记中为感兴趣的元素分配一个特定的类。然后，将该类的所有元素放入一个数组中，然后您可以循环遍历该数组：

var elements = document.getElementsByClassName("yourClassName");

elements.forEach(function(element) {
  // do things to element
});

【讨论】：

【解决方案5】：

你可以把它做成两个漂亮的集合作为数组：

var buttons = ["theBackButton","theNextButton","introductionText", ... ];
var positions = [];

for(var button in buttons) {
    positions.push(document.getElementById(buttons[button]));
}

现在您不必使用单个变量。这取决于您将使用一个类（如建议的其他答案中可能也适用）来实现的目标。

【讨论】：

【解决方案6】：

您可以使用 jQuery 来处理这类事情。基本上，jQuery 是一个库，可以让您轻松编写非常强大的 Javascript。

要实现这一点，您应该为每个元素使用相同的类名，然后使用“each”函数遍历它们。

查看此短片了解更多详情：https://www.youtube.com/watch?v=67IP2QoNIDc

【讨论】：