如何循环数组中的元素id并将其分配给变量

How can I loop over element ids in an array and assign them to variables?

本文关键字：id 分配 变量 元素 何循环 循环 数组      更新时间：2023-09-26

我正在尝试重构window.onload函数，以避免冗余。我想使用它们的id，循环遍历我分配给全局变量的元素。最初，我可以用循环分配onclick函数，但现在我无法用小提琴复制它。但主要问题只是试图做到这一点（见fiddle）：

var gragh, gorgh;
var ids = ["gragh", "gorgh"];
for (var i = 0; i < ids.length; i++) {
    ids[i] = document.getElementById(ids[i]);  
    // TypeError: document.getElementById(ids[i]).onclick = doStuff;
}
//console.log(gragh);  undefined

这应该将变量gragh和gorgh分配给具有相同id的p个元素。在循环中，ids[i]似乎指的是p元素。然而，在循环之后，这些变量是未定义的。当这些变量没有被引号包围时，在数组中循环也不起作用。我甚至尝试过使用eval（），结果喜忧参半。所以我的问题是，我该如何让它发挥作用？还有，为什么这不起作用？如果ids=[gragh，gorgh]（没有引号），那么数组中的这些变量指的是什么？

不要在循环中重新分配它，请尝试使用新数组进行填充。把它想象成一个引用——你在循环的时候修改它。

var gragh, gorgh;
var ids = ["gragh", "gorgh"];
var newSet = [];
for (var i = 0; i < ids.length; i++) {
    newSet[i] = document.getElementById(ids[i]);  
}

循环将在这个onclick执行之前很久完成循环。因此，此时i的值将是循环的上限。

closure 的解决方案

var gragh;
var ids = ["gragh", "gorgh"];
for (var i=0; i<ids.length; i++) {
    (function(i){ // creating closure
  console.log(i)
    document.getElementById(ids[i]).onclick = doStuff
})(i) // passing value of i
}
document.getElementById("gragh").innerHTML = "ids[0]: " + ids[0] + ", ids[1]: " + ids[1]
function doStuff() {
  document.getElementById("gorgh").innerHTML = "ids[0]: " + ids[0] + ",ids[1]: " + ids[1] + ", var gragh: " + gragh;
}

gragh是未定义的，因为您只声明了它，但从未初始化它

JSFIDDLE

相关文章：