Hide Div basierend auf Benutzerauswahl in jQuery

Question

Ich bin ein Mitarbeiterverzeichnis mit AJAX/jQuery Aufbau der Random User Employee Directory API. Dies ist die eigentliche Datenfeed ich verwende:

https://randomuser.me/api/?results=12&format=json

ich eine Arbeits Seite haben, die die Benutzer anzeigt. Wenn jemand auf einen Mitarbeiter klickt, sollte er die Benutzerinformationen anzeigen - zusammen mit einigen zusätzlichen Feldern in einem Modal.

Auf Seite Last - Ich habe alle diese zusätzlichen Felder für jeden Benutzer versteckt --- und ich versuche, diese zusätzlichen Felder in der modal zu zeigen (bei Klick). Das Problem ist, dass, während die Informationen eines angeklickten Benutzers korrekt in das Modal eingetragen werden, alle anderen zusätzlichen Informationen für jeden Mitarbeiter auf der Hauptseite erscheinen.

Here is the jFiddle

und mein JS-Code:

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

ich, wie gerade brauche, um herauszufinden, alle anderen Benutzer 'Extra-Info' zu verbergen, während die ausgewählten Benutzer zu halten zusätzliche Informationen angezeigt (in das Modal).

Hier ist Teil des Codes, wo ich versuche, nur die ausgewählten Benutzer zusätzliche Informationen anzeigen ... aber ich bin nur ein wenig unsicher, wie diese richtig tun:

//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

Sie aktualisieren müssen zwei Funktionen

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