-1
我建立使用AJAX/jQuery的利用隨機用戶員工目錄API僱員目錄用戶選擇。這是實際的數據饋送我使用:隱藏股利基於jQuery中
https://randomuser.me/api/?results=12&format=json
我有這顯示了用戶一個工作頁面。如果有人點擊一名僱員,它應該顯示用戶的信息 - 以及一個模式中的一些額外的額外領域。
在頁面加載 - 我已經隱藏在這一切爲每一位用戶這些額外的領域---,我試圖表現出的模態(在點擊)這些額外的領域。問題是,當點擊用戶的信息正確地填充到模式中時 - 每個員工的所有其他額外信息都出現在主頁面上。
和我的JS代碼:
//Get JSON DATA and stored data in variable Employees.
var employees;
var phone;
$.ajax({
url: 'https://randomuser.me/api/?results=12&format=json',
success: function(data){
employees = data.results;
displayEmployees(employees);
$('.extra-info').hide();
}
});
//Create Function to Build Employee Car
function displayEmployees(employees){
var employeesHTML = ""
$.each(employees, function(i, employee) {
employeesHTML += '<div class="employee">';
employeesHTML += '<img class="employee-photo" src="' + employee.picture.large + '"></a>';
employeesHTML += '<div class="info">';
employeesHTML += '<div class="name">'+ employee.name.first + ' ' + employee.name.last + '</div>';
employeesHTML += '<div class="email grey-font">'+ employee.email + '</div>';
employeesHTML += '<div class="city grey-font">' + employee.location.city + '</div></div>';
employeesHTML += '<div class="extra-info"><hr align="left" width="90%">';
employeesHTML += '<div class="phone">' + employee.phone + '</div>';
employeesHTML += '<div class="address">' + employee.location.street + ' ' + employee.location.city;
employeesHTML += ',' + employee.location.state + ' ' + employee.location.zip + '</div>';
employeesHTML += '<div class="birthday">Birthday: ' + employee.location.dob + '</div></div></div>';
});
$('.employees').html(employeesHTML);
return phone;
};
//Create Function to Build Modal
function displayModal(employees){
var employeesModal="";
//create modal
employeesModal += $(employees).html();
$('.modal-text').html(employeesModal);
}
//Click Event To Display Modal
var modal = document.getElementById('myModal');
$('.employees').on("click", ".employee", function() {
var current = $(this);
var extra = current.parent().find(".extra-info");
extra.css('display', 'block');
modal.style.display = "block";
displayModal(current);
});
// // When the user clicks on (x), close the modal
$('.close').on("click", function() {
modal.style.display = "none";
});
// // When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
我只需要弄清楚如何隱藏所有其他用戶的「額外信息」,同時保持選定的用戶額外的信息顯示(以模態)。
這裏就是我想只顯示選定的用戶額外的信息代碼的一部分......但我只是有點不確定如何正確地做到這一點:
//Click Event To Display Modal
var modal = document.getElementById('myModal');
$('.employees').on("click", ".employee", function() {
var current = $(this);
var extra = current.parent().find(".extra-info");
extra.css('display', 'block');
modal.style.display = "block";
displayModal(current);
});
燁說做到了。非常感謝! –