Question

我一直困扰着我一个对任何人来说都很容易的问题。

我目前正在使用故障创建自己的“伪”专业网页。我设法用HTML将想要的所有内容放到它上，然后用CSS对其进行了样式化。到目前为止，它看起来像一个真实的网页。

在此网页的末尾，我想添加一个“与我们联系”部分，这很棘手。我想做的是使用Javascript和RANDOM USER GENERATOR复制观众可以联系的专业人士。每个专业人员（总共10人）都有一张照片，将鼠标放在每个个人资料上，查看者可以看到该专业人员的名字和姓名（也许以后我会添加电话号码和电子邮件地址）。

我几乎覆盖了那部分，这是我的代码， professional.js：

$.getJSON( "https://randomuser.me/api/?results=10", function( json ) {
console.log( json ); // print data in the console
var users = json.results; // results is an array of users

// store the "body" of our document inside a jQuery object
var body = $( "body" );

// loop through each user in our "users" array
for( var i = 0; i< users.length; i = i + 1 ) {
// store the current user in a variable
var user = users[ i ];

// we create a container for the user image and its data
var imgContainer = $( "<div class='img-container'></div>" );

// we create a jQuery object with an "img" element
var img = $( "<img>" );
// set its "src" attribute with a jquery method
img.attr( "src", user.picture.large );
// and append this element to our container
imgContainer.append( img );

// we create a jQuery object with a new paragraph 
var userData = $( "<p class='user-data'></p>" );
// set its inner HTML with jQuery
userData.html( user.name.first + "<br>" + user.name.last );
// and append this to our container
imgContainer.append( userData );

// finally we append the container to the "body" of our document
body.append( imgContainer );
}
} );

这是CSS使用的样式：

* {
margin: 0;
padding: 0;
}

body {
background: black;
text-align: center;
line-height: 0;
}

.img-container {
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
}

.user-data {
position: absolute;
bottom: 0;
left: -120%;
width: 100%;
height: 50px;
background: rgba( 0, 0, 0, 0.3 );

padding-left: 10px;
text-align: left;
color: white;
font-family: sans-serif;
font-size: 20px;
line-height: 24px;

transition: left 0.3s ease-in;
}

.img-container:hover .user-data {
left: 0;
}

问题在于，当我尝试将Java导入文档时，会“擦除”我的网页。就像它位于其上方并隐藏所有内容。我认为问题出在我的.js文件将内容附加到网页的“正文”中（body.append（imgContainer）;）。

所以我的问题是，如何使用getJSON将.js项目附加到我的网页中，而不删除所有内容。我希望将其附加在我的网页的底部。看起来很傻，但是我已经搜索了四个小时，却找不到任何答案。

非常感谢。

在我的网页末尾附加getJSON时出现问题

0 个答案: