jQueryのユーザー選択に基づいてdivを隠す

Question

私は、Random User Employee Directory APIを利用してAJAX/jQueryを使用して従業員ディレクトリを構築しています。

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

私はユーザが表示され、作業のページを持っている：これは私が使用している実際のデータフィードです。誰かが従業員をクリックすると、モーダルにいくつか追加のフィールドが追加され、ユーザーの情報が表示されます。

ページの読み込み - すべてのユーザーにこれらの余分なフィールドをすべて隠してしまいました。これらの余分なフィールドを（クリック時に）モーダルに表示しようとしています。問題は、クリックされたユーザーの情報が正しくモーダルに入力されている間に、各従業員のその他の追加情報がすべてメインページに表示されることです。に（余分な情報が表示され、選択したユーザーを維持しながら、私はちょうど、他のユーザーの「補足情報」のすべてを非表示にする方法を把握する必要があり

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

：

Here is the jFiddle

と私のJSコードモーダル）。ここで

は、私が唯一の選択したユーザーの余分な情報を表示しようとしていたコードの一部である...しかし、私はこれを正しく行うにはどのように少しだけわからないよ：

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

はあなたが更新する必要があります2つの機能

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