Question

我对网络开发和javascript都很陌生。为了使我的网站更容易维护，我决定使用Javascript从文本文件中读取“navbar”并将其添加到每个页面的顶部。我现在要做的是创建一个允许我指定链接的功能，以及一个“链接深度”，以返回我的页面的相对链接。这是功能：

 function increaseLinkDepth(aLink, aDepth) {
     var result = aLink;
     for(i = 0;i < aDepth;i++) {
         result = "../" + result;
     }
     return result;
 }

现在，我在桌面和移动设备上有一些开发经验，所以这是一个非常简单的功能。如果我调用这样的函数：/increaseLinkDepth("index.html", 1)，我希望得到以下结果：../index.html。当我在网站上运行javascript时，我确实得到了。现在，当我在下面的代码中调用该函数时：

 var anchors = document.getElementsByTagName("a");
    for(i = 0;i < anchors.length;i++) {
        var lAnchor = anchors[i];
        var lAnchorLink = lAnchor.getAttribute("href");
        if(lAnchorLink.substring(0, 4) != "http") {
            var newLink = increaseLinkDepth(lAnchorLink, 1);
            //alert(newLink);
            lAnchor.setAttribute("href", newLink);
        }
    }

我最终陷入某种无限循环，导致我不得不重新启动浏览器。它应该寻找的链接是：

的index.html
events.html
about.html

它找到所有三个，但循环发生在about.html链接上。我不确定我的代码中是否遗漏了某些东西（可能已经看了太长时间）。但我没有看到我遇到这个问题。

现在，我明白这可能不是实现这一目标的最佳方法，如果不是，请告诉我，这是我能想到创建导航栏的唯一方法，我不需要改变每页的HTML。

Answer 1

您从未在任一范围内声明i，因此两个循环都会重置全局i变量。

为避免全球污染，请务必将所有代码包装在IIFE中，并添加"use strict"指令：

(function () {
    "use strict";
    ...your code here...
}());

然后，浏览器控制台会告诉您在这些范围内使用了未声明的变量。

您提供的代码的已清理版本将是：

(function () {
    "use strict";

    //variables declared at the top of the scope that they belong to
    var anchors,
        i,
        lAnchor,
        lAnchorLink,
        newLink;

    //function declarations follow variable declarations
    function increaseLinkDepth(aLink, aDepth) {
        var result,
            i;
        result = aLink;
        for (i = 0; i < aDepth; i++) {
            result = "../" + result;
        }
        return result;
    }

    //assignment and execution occurs after declarations
    anchors = document.getElementsByTagName('a');
    for (i = 0; i < anchors.length; i++) {
        lAnchor = anchors[i];
        lAnchorLink = lAnchor.getAttribute('href');
        if (lAnchorLink.substring(0, 4) !== 'http') {
            newLink = increaseLinkDepth(lAnchorLink, 1);
            //alert(newLink);
            lAnchor.setAttribute("href", newLink);
        }
    }

    ...more code...
}());

Answer 2

您正在使用分配给'i'而不将其声明为带有var - in JavaScript的局部变量，这会创建一个全局变量，这意味着您的两个函数都使用相同的索引器。

在每个函数的顶部添加var i;，你应该没问题。

Answer 3

如果在声明变量时忘记使用var关键字，则默认为全局范围。在您的情况下，问题在于i变量，在两个方法中都引用了全局范围内的相同变量。简而言之，您正在做的是：

for (i=0; i<n; i++) {
  for (i=0; i<m; i++) {
    doStuff();
  }
}

将代码更改为以下内容：

function increaseLinkDepth(aLink, aDepth) {
     var result = aLink;
     for(var i = 0;i < aDepth;i++) {
         result = "../" + result;
     }
     return result;
 }

在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

Javascript循环运行奇怪

3 个答案: