Question

我正在用javascript / jquery脚本编写一些HTML。该脚本使用for-in循环来遍历javascript对象，使用jQuery .append语句将HTML格式化行中的某些模式替换为来自对象的数据，最后使用.replace修改DOM。在下面粘贴的代码中，您将看到一些注释掉的行。如果我运行带有注释的代码，我会得到预期的结果。但是，一旦我删除评论，我就会得到奇怪的结果。取消注释“OptionA”后，结果如下.....页面加载不再起作用。该页面显示“找不到网页”消息，更令人惊讶和奇怪的是，多功能框中的负载声明更改为：

文件：///用户/用户1 /文档/ Udacity / IntroJS /前端-nanodegree - 恢复/％3Cdiv％20class =％22location文本％22％3ELexington，％20KY％3C /格％3E

正确加载页面时的正常页面加载语句如下所示：

文件：///Users/user1/Documents/Udacity/IntroJS/frontend-nanodegree-resume/debug.html

如果选项B已取消注释，则只显示“工作体验”字样，但不会打印日期。

代码段：

<!DOCTYPE html>
<html>
<head>  
<meta charset="utf-8">
<title>Debug</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div id="main">
   <div id="workExperience" class="gray">
      <h2>Work Experience</h2>
    </div>
</div>
<script>
var HTMLworkStart = '<div class="work-entry"></div>';
var HTMLworkDates = '<div class="date-text">%data%</div>';
var HTMLworkLocation = '<div class="location-text">%data%</div>';
var work = {
        "job1":{
            "dates": "2007 to 2016",
            "location": "Raleigh, NC"
            },

            "job2":{
                "dates": "2003 to 2007",
                "location": "Los Angeles, CA"   
            },

            "job3":{
                "dates": "2000 to 2003",    
                "location": "Lexington, KY"
            }
};

            for(var job in work){
                if(work.hasOwnProperty(job))
                {
                   var dates = HTMLworkDates.replace("%data%", work[job].dates);
                   //OptionA: var location = HTMLworkLocation.replace("%data%", work[job].location);
                   //OptionB: var location = HTMLworkLocation.replace("%data%", "Raleigh, NC";
                   $("#workExperience").append(HTMLworkStart);
                   $(".work-entry:last").append(dates);
                   $(".work-entry:last").append(location);

                }
            }

</script>
</body>

</html>

为了调试这个问题，我将上面的代码片段与我正在处理的项目的其余部分隔离开来。我试图查看是否存在语法错误等。但隔离代码会产生相同的结果。

所以我的问题是：

- 为什么jQuery .replace导致在这个孤立的案例中找不到网页？

- 标记为OptionA的行有什么特别之处，导致整个页面加载失败，并进一步奇怪地修改多功能框中的行，如上所述？

- 我的完整代码中有另一行类似于此处示例中的“位置 - 文本”行，这不会导致任何问题。

Answer 1

将您的位置变量更改为其他名称。 location是全局位置属性的名称，它控制窗口加载的URL。

Answer 2

因为您的代码在任何函数之外运行，var声明会创建全局上下文的属性：window。 window.location已经是内置的全局属性，隐式设置其值意味着您希望浏览器从新URL加载页面。

您可以更改变量名称，或者将所有代码包装在函数中，以便var声明创建局部变量。

问题与使用.replace()没有任何关系（反过来，它与jQuery无关;它是JavaScript的一部分）。

为什么使用jQuery .replace导致网页找不到错误？

2 个答案: