Question

我有一个包含大量链接的页面，需要定期更新，因此我使用了一个包含以下内容的脚本：

<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>
...

我在HTML中使用以下链接引用这些ID：

getElementById

等等。

目前，我在脚本中有几十行<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>行。

我意识到“迭代是人类;递归是神圣的” - 那么我怎样才能正确地编写一个正确递增“doclink”和“data”变量的循环，以防止所有这些冗余？

感谢L.Stewart建议使用数组。然后，我的页面的简化版本如下所示：

for

似乎我需要使用1 (i = 1; i <= data.length; i++)启动{{1}}循环迭代，然后使用数组中的空白（零）值进行补偿，以使链接正确排列。< / p>

此示例过于简化：链接实际上隐藏在具有许多其他元素的表行中;所以这对我来说效果最好。感谢所有提供意见的人！

Answer 1

您可以尝试类似

的内容

//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];
}

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

为了进一步尝试：它将根据数组创建链接列表。您不需要复制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

你可以试试这个：

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++;
}

这是一个demo

这是您问题的直接解决方案但我不喜欢eval在我的工作中这不是最佳做法。因此，如果您可以处理将所有数据放入对象或数组中，那么它将更加有条理。

我希望它有所帮助。

javascript增量变量getElementById（）

2 个答案: