вывод информации в всплывающем окне
Код выводит картинку, пол, имя, фамилию каждого человека из json файла на др сайте через get ajax. Надо сделать при клике на блок с персонажем вывод подробной информации, которая хранится там же, а именно, город штат, картинку побольше. строки 22-28 клик и вывод есть, а связать с инфой ajax запроса не знаю как. наставьте на путь истинный)
window.onload = function() { var output = document.body; var ajaxhttp = new XMLHttpRequest(); var url = "https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture"; function createItem(picSrc, title, first, last) { var div = document.createElement('div'); div.innerHTML = '<div class="user-block"><div class="user-block-img"><img src="' + picSrc + '" /></div><ul class="user-block-list"><li>' + title + '</li><li>' + first + '</li><li>' + last + '</li></ul></div>'; return div; } ajaxhttp.open("GET", url, true); ajaxhttp.setRequestHeader("content-type", "application/json"); ajaxhttp.onreadystatechange = function() { if (ajaxhttp.readyState == 4 && ajaxhttp.status == 200) { var jcontent = JSON.parse(ajaxhttp.responseText); var listWrapper = document.createElement('div'); jcontent.results.forEach(function (userJSON) { listWrapper.appendChild(createItem(userJSON.picture.medium, userJSON.name.title, userJSON.name.first, userJSON.name.last)); }); document.body.appendChild(listWrapper); var userBlocks = document.getElementsByClassName('user-block'); for (var i = 0; i < userBlocks.length; i++) { userBlocks[i].onclick = function() { alert ('hello'); } } } } ajaxhttp.send(null); } |
la-la land,
проще в строке 20 надо ставить клик , а цикл 22-28 убрать |
Rise,
для работы для вида сделал пока alert, или что туда зарядить? нужно при клике на каждый блок с инфой выводить всплывающее окно, что по идее и происходит, просто вывод нужен какой-то посерьёзнее чем alert, либо реализовать клик по блокам как-то иначе для наглядности, временно запилил сюда pilinni.ru |
рони,
как ещё можно реализовать клик по блокам? и вообще вывод всплывающего с изорбражением из ajax запроса с привязкой к блоку? т.e. более подробную информацию по пользователю |
la-la land,
а про сортировку вам в задании ничего не говорили? |
рони,
есть такое задание:D |
la-la land,
в прошлый раз это было решено так - через делегирование - в контейнер помещался блок user__content содержаший мини и макси инфо -- клик по контейнеру открывал блок макси если клик был по мини. |
la-la land,
можно решить иначе блок макси формировать только по запросу (клику по мини) используя индекс . |
|
ооо, дельная мысль про мини макси, рони, спасибо!
вот только визуально я и так представляю что должно получиться) а вот какие операторы функции методы использовать пока не догоняю, скажите лучше что почитать? |
Часовой пояс GMT +3, время: 13:31. |