Question

好的，所以我有3个文件，首先是一个JSON文件，它告诉我所需的所有信息，一个Html文件，它给了我一个框架，在哪里放置所有的JavaScript 一个javascript文件，它将连接JSON中的信息并放入html。

所以我的HTML就像：

<div class="hello">
  <h2>Name</h2>
</div>

我的JSON就是这个，带有数据/ bio.json的根：

{
 "name" :  "Olivia Palito",
 "age" : "23"
}

我的Javascript是这样的：

var mockup = '<div class="work"></div>';
var mockup02 = '<div>%data%</div>';
var $addItem01 = $(".hello");
var $addItem02 = $(".work");
var jsonRoot = 'data/bio.json';
$.getJSON(jsonRoot, function(data){
   var addMe = mockup.replace('%data%', data.name);
   $addItem01.append(mockup);
   $addItem02.append(addMe);
});

现在问题，当我在浏览器上运行它时，我可以添加第一个模型，它将添加<div class="work"></div>但是当我尝试添加addMe时，它不会显示任何内容。我在这里错过了什么？如果我把console.log（数据）;它会显示一些东西，这意味着我收到的文件，但它只是没有添加到html，因为我可以添加静态文本，而不是使用替换方法，并且不会添加内容。

Answer 1

var mockup02 = mockup.replace(%data%, data.name);

它不起作用，因为它不是有效的JavaScript。

打开控制台，你会看到错误

未捕获的SyntaxError：意外的标记％

你需要把它变成正则表达式

var mockup02 = mockup.replace(/%data%/, data.name);

或字符串

var mockup02 = mockup.replace("%data%", data.name);

它失败的第二个原因是你在选择元素work之前将其添加到页面中。它并没有神奇地找到元素。

将其切换为并将添加它。

$(".work").append(addMe);

使用Jquery $ getJSON中的from来追加方法

1 个答案: