проблема добавления getJSON в конце моей веб-страницы - PullRequest
Новая
       7

проблема добавления getJSON в конце моей веб-страницы

0 голосов
/ 23 ноября 2018

Я несколько дней застрял с проблемой, которая, на мой взгляд, действительно проста для всех.

В настоящее время я работаю над созданием своей собственной "фальшивой" профессиональной веб-страницы, используя глюк.Мне удалось поместить все, что я хотел, используя 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);).

Поэтому мой вопрос, как я могудобавьте мой .js-проект с помощью getJSON на мою веб-страницу, не стирая ничего.Я хочу добавить его в самом низу моей веб-страницы.Это кажется глупым, но я искал четыре часа и не смог найти ответа.

Большое спасибо заранее.

...