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等]，其对应的值为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 ，可能会在您不再需要之后消除。

Answer 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"])

Answer 3

也许不要过多依赖ID，而是使用普通班级或选择器来查找您的职位，使用document.getElementsByClassName('position');。

Answer 4

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

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

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

Answer 5

您可以将两个漂亮的集合作为数组生成：

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

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

现在您不必使用单个变量。这取决于你将要使用类似于其他答案的建议，也可能是合适的。

Answer 6

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

要使其工作，您应该为每个元素使用相同的类名，然后使用“each”函数迭代它们。

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

JavaScript创建变量并使用循环

6 个答案: