javascript增量变量getElementById（）

Question

I have a page with numerous links, which need periodic updating, so I utilize a script that has: 我的页面上有很多链接，需要定期更新，因此我使用了一个脚本，该脚本具有：

var data01 = "docs/Document01.pdf"
var data02 = "docs/Document02.pdf"
var data03 = "docs/Document03.pdf"
...
document.getElementById("doclink01").href = data01;
document.getElementById("doclink02").href = data02;
document.getElementById("doclink03").href = data03;
...

I reference in the HTML these IDs with links such as: 我在HTML中通过链接引用了这些ID，例如：

<p>Link: <a id="doclink01">Document 1</a></p>
<p>Link: <a id="doclink02">Document 2</a></p>
<p>Link: <a id="doclink03">Document 3</a></p>
...

and so on. 等等。

Currently, I have dozens of these getElementById lines in the script. 目前，脚本中有数十行这些getElementById行。

I realize that "to iterate is human; to recurse is divine" -- so how can I properly write a loop that correctly increments both the "doclink" and "data" variables, to prevent all this redundancy? 我意识到“迭代是人类的；递归是神圣的”-那么，我如何正确编写一个循环来正确地增加“ doclink”和“ data”变量，以防止所有这些冗余？

Thanks L.Stewart's suggestion to use an array. 感谢L.Stewart的建议使用数组。 Then, a simplified version of my page looks like this: 然后，我的页面的简化版本如下所示：

<html>
<body>

<p>Link: <a id="doclink1">Document 1</a></p>
<p>Link: <a id="doclink2">Document 2</a></p>
<p>Link: <a id="doclink3">Document 3</a></p>
...

<script>
var data = ["",
"docs/Document1.pdf",
"docs/Document2.pdf",
"docs/Document3.pdf"
];

for (i = 1; i <= data.length; i++) {
  document.getElementById('doclink' + i).href = data[i];
}
</script>

</body>
</html>

It seems that I needed to start my for loop iterations with 1 (i = 1; i <= data.length; i++) , and then compensate with a blank (zero) value in the array, to get the links to line up properly. 看来我需要从1 (i = 1; i <= data.length; i++)开始for循环迭代，然后用数组中的空白（零）值进行补偿，以使链接正确对齐。

This example is over-simplifed: the links are actually buried in table rows with a lot of other elements; 这个例子过于简单：链接实际上被埋在具有许多其他元素的表行中。 so this works best for me. 所以这对我最有效。 Thanks to all who offered input ! 感谢所有提供意见的人！

Answer 1

You could Try something like 您可以尝试类似

//Create an array to hold your data objects (href links?)
var data = [];
var data0;

//Fill your array with the data objects
data.push(data0);

for (i = 0; i < data.length; i++)     
{
    document.getElementById('doclink' + i).href = data[i];
}

//refer to http://www.w3schools.com/js/js_arrays.asp //参考http://www.w3schools.com/js/js_arrays.asp

To further you could try: It will create a list of your links based on the array. 若要进一步尝试，请执行以下操作：它将基于数组创建链接列表。 You do not need to duplicate the links in html and javascript. 您无需复制html和javascript中的链接。

<html>
    <body>
    <div id = "docLinks"></div>

    <script>
        var data = [
        {pretext:"Link: ",link:"docs/Document1.pdf",text:"Document 1"},
        {pretext:"Link: ",link:"docs/Document2.pdf",text:"Document 2"},
        {pretext:"Link: ",link:"docs/Document3.pdf",text:"Document 3"}
        ];
        var docLinks = document.getElementById('docLinks');
        for (i = 0; i < data.length; i++) {
        var p = document.createElement('p');
        var a = document.createElement("a");

        p.innerText = data[i].pretext;
        a.href = data[i].link;
        a.innerText = data[i].text;

        p.appendChild(a);
        docLinks.appendChild(p);  
        }
    </script>

</body>
</html>

Answer 2

You can try this: 您可以尝试以下方法：

var i=1;
var data01="x",data02="y",data03="z";
var x;
while(true){
  try{
     x = eval("data0"+i);
  }catch(ReferenceError){
    break;
  }
  document.getElementById('doclink0' + i).href = x;
  i++;
}

And this is a demo 这是一个演示

That is the direct solution for your Question But I don't prefer eval in my work it not a best practice. 那是您问题的直接解决方案，但是我不喜欢eval工作，这不是最佳实践。 So If you can handle put all the data into object or array it will more organized for you. 因此，如果可以处理将所有数据放入对象或数组中，它将为您提供更好的组织。

I hope it helps. 希望对您有所帮助。

javascript增量变量getElementById（）

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-01-16 21:55:44

解决方案2
0 2017-01-16 23:26:54

javascript增量变量getElementById（）

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-01-16 21:55:44

解决方案2 0 2017-01-16 23:26:54

解决方案1
0 已采纳 2017-01-16 21:55:44

解决方案2
0 2017-01-16 23:26:54