Question

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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

这应该将变量gragh和gorgh分配给具有相同id的p个元素。在循环内，ids [i]似乎是指p元素。但是，在循环之后，这些变量是未定义的。当循环遍历数组并且这些变量未被引号括起时，这也不起作用。我甚至尝试过使用eval（），结果好坏参半。所以我的问题是，我怎样才能让它发挥作用？而且，为什么这不起作用？如果ids = [gragh，gorgh]（没有引号），数组中的这些变量会引用什么？

Answer 1

不要在循环中重新分配它，尝试使用新数组进行填充。可以将其视为参考 - 您在循环时修改它。

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

Answer 2

循环将在此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

如何在数组中循环元素id并将它们分配给变量？

2 个答案: