Question

我正在利用随机用户员工目录API使用AJAX / jQuery构建员工目录。这是我使用的实际数据Feed：

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";
    }
}

我只需要弄清楚如何隐藏所有其他用户的＆＃39;额外信息＆＃39;同时保持所选用户显示额外信息（在模态中）。

以下是我尝试仅显示所选用户额外信息的代码的一部分...但我不确定如何正确执行此操作：

//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);
});

Answer 1

您需要更新两个功能

function displayModal(employees){
  var employeesModal="";
  employees.find(".extra-info").css('display', 'block');
  //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).clone();
  //var extra = current.find(".extra-info");
  //extra.css('display', 'block');
  modal.style.display = "block";
  displayModal(current);
});

在jQuery中基于用户选择隐藏Div

1 个答案: