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

JavaScript creating variables and assigning them a value using a loop

本文关键字：赋值 循环 创建 变量 JavaScript      更新时间：2023-09-26

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

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

谢谢。

而不是手动编码 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 或任何您要操作的内容。

密切关注控制台.log，也许在不再需要后消除。

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

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

您可以

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

var elements = document.getElementsByClassName("yourClassName");
elements.forEach(function(element) {
  // do things to element
});

你可以用它制作两个漂亮的集合作为数组：

var buttons = ["theBackButton","theNextButton","introductionText", ... ];
var positions = [];
for(var button in buttons) {
    positions.push(document.getElementById(buttons[button]));
}

现在，您不必使用单个变量。这取决于您将使用其他答案中建议的类来实现什么。

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

为此，您应该为每个元素使用相同的类名，然后使用"each"函数遍历它们。

查看此简短视频以获取更多详细信息：https://www.youtube.com/watch?v=67IP2QoNIDc

相关文章：