将动态 div 链接到动态模态

Question

I have a dynamically generated "user grid" and a dynamically generated "user modal". The modal is triggered when a "user card" is clicked (this functionality is working great).

However, when clicking on a specific "user card"... it does not just load the selected user card info, but it loads all of the user data for all of the user cards...

Essentially, I would like to click the "Leanne Graham Card" and only display the "Leanne Graham Modal" content.

Have included the code below

 //THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE var userJSON = 'https://captain-steve.github.io/demo/db.json' //THIS IS THE CODE TO FETCH EXTERNAL JSON FILE $.getJSON(userJSON, function (populateUsers) { //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL USER GRID var userCard = populateUsers.reduce((acc, {id, name, username, email, phone, company,}) => acc += ` <div class='col col-4 align-items-stretch strain-container'> <div id="${id}" class="card user-card"> <div class="card-body"> <h2 class="title">${name}</h2> <h6 class="title">${username}</h6> <h6 class="title">${email}</h6> <h6 class="title">${phone}</h6> <h6 class="title">${company}</h6> </div> </div> </div>`, ``); $('#user-grid').append(userCard) }); //THIS IS THE CODE TO RUN WHEN USER CARD IS CLICKED $('#user-grid').on('click', '.user-card', function(e){ //THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE var userJSON = 'https://captain-steve.github.io/demo/db.json' //THIS IS THE CODE TO FETCH EXTERNAL JSON FILE $.getJSON(userJSON + "?id=" + e.currentTarget.id, function (populateUserModal) { //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL MODAL var userModal = populateUserModal.reduce((acc, {id, name, username, email, phone, company,}) => acc += ` <div id="${id}" class="card user-card"> <div class="card-body"> <h2 class="title">${name}</h2> <h6 class="title">${username}</h6> <h6 class="title">${email}</h6> <h6 class="title">${phone}</h6> <h6 class="title">${company}</h6> </div> </div>`, ``); $('#modal-content').append(userModal) }); $('#user-modal').modal({show:true}); }); //THIS IS THE CODE TO CLEAR ALL THE JSON DATA WHEN MODAL IS CLOSED $("#user-modal").on("hidden.bs.modal", function(){ $("#modal-content").html(""); });

 <:-- Scripts & Sheets --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min:css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min:js" type="text/javascript"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!-- Modal --> <div id="user-modal" class="user-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="uder-card" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div id="modal-content"> </div> </div> </div> <!-- User Grid --> <div id="user-grid" class="row container fluid-container"></div>

Any help would be greatly appreciated!

Thanks a lot, Steve.

Answer 1

Event object contains currentTarget property which refers to clicked item. You can use it in order to extract clicked item id.

Then you just need find the user by id in json you got

 //THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE var userJSON = "https://captain-steve.github.io/demo/db.json"; //THIS IS THE CODE TO FETCH EXTERNAL JSON FILE window.$.getJSON(userJSON, function (populateUsers) { //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL USER GRID var userCard = populateUsers.reduce( (acc, { id, name, username, email, phone, company }) => (acc += ` <div class='col col-4 align-items-stretch strain-container'> <div id="${id}" class="card user-card"> <div class="card-body"> <h2 class="title">${name}</h2> <h6 class="title">${username}</h6> <h6 class="title">${email}</h6> <h6 class="title">${phone}</h6> <h6 class="title">${company}</h6> </div> </div> </div>`), `` ); $("#user-grid").append(userCard); }); //THIS IS THE CODE TO RUN WHEN USER CARD IS CLICKED $("#user-grid").on("click", ".user-card", function (e) { //THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE var userJSON = "https://captain-steve.github.io/demo/db.json"; //THIS IS THE CODE TO FETCH EXTERNAL JSON FILE $.getJSON(userJSON, function (users) { const selectedUserId = e.currentTarget.id; const selectedUserData = users.find( (user) => user.id === Number(selectedUserId) ); //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL MODAL let userModal = ` <div id="${selectedUserData.id}" class="card user-card"> <div class="card-body"> <h2 class="title">User not found</h2> </div> </div>`; if (selectedUserData) { userModal = ` <div id="${selectedUserData.id}" class="card user-card"> <div class="card-body"> <h2 class="title">${selectedUserData.name}</h2> <h6 class="title">${selectedUserData.username}</h6> <h6 class="title">${selectedUserData.email}</h6> <h6 class="title">${selectedUserData.phone}</h6> <h6 class="title">${selectedUserData.company}</h6> </div> </div>`; } $("#modal-content").append(userModal); }); $("#user-modal").modal({ show: true }); }); //THIS IS THE CODE TO CLEAR ALL THE JSON DATA WHEN MODAL IS CLOSED $("#user-modal").on("hidden.bs.modal", function () { $("#modal-content").html(""); });

 <:DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <div id="app"></div> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min:css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min:js" type="text/javascript" ></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" ></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" ></script> <!-- Modal --> <div id="user-modal" class="user-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="uder-card" aria-hidden="true" > <div class="modal-dialog modal-dialog-centered" role="document"> <div id="modal-content"></div> </div> </div> <!-- User Grid --> <div id="user-grid" class="row container fluid-container"></div> <script src="src/index.js"></script> </body> </html>

Answer 2

As Oleksandr Sakun said event object contains currentTarget which it contains id of what you clicked.

 //THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE var userJSON = 'https://jsonplaceholder.typicode.com/users' //THIS IS THE CODE TO FETCH EXTERNAL JSON FILE $.getJSON(userJSON, function (populateUsers) { //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL USER GRID var userCard = populateUsers.reduce((acc, {id, name, username, email, phone, company,}) => acc += ` <div class='col col-4 align-items-stretch strain-container'> <div id="${id}" class="card user-card"> <div class="card-body"> <h2 class="title">${name}</h2> <h6 class="title">${username}</h6> <h6 class="title">${email}</h6> <h6 class="title">${phone}</h6> <h6 class="title">${company}</h6> </div> </div> </div>`, ``); $('#user-grid').append(userCard) }); //THIS IS THE CODE TO RUN WHEN USER CARD IS CLICKED $('#user-grid').on('click', '.user-card', function(e){ //THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE var userJSON = 'https://jsonplaceholder.typicode.com/users' //THIS IS THE CODE TO FETCH EXTERNAL JSON FILE $.getJSON(userJSON + "?id=" + e.currentTarget.id, function (populateUserModal) { //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL MODALS var userModal = populateUserModal.reduce((acc, {id, name, username, email, phone, company,}) => acc += ` <div id="${id}" class="card user-card"> <div class="card-body"> <h2 class="title">${name}</h2> <h6 class="title">${username}</h6> <h6 class="title">${email}</h6> <h6 class="title">${phone}</h6> <h6 class="title">${company}</h6> </div> </div>`, ``); $('#modal-content').append(userModal) }); $('#user-modal').modal({show:true}); }); //THIS IS THE CODE TO CLEAR ALL THE JSON DATA WHEN MODAL IS CLOSED $("#user-modal").on("hidden.bs.modal", function(){ $("#modal-content").html(""); });

 <:-- Scripts & Sheets --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min:css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min:js" type="text/javascript"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!-- Modal --> <div id="user-modal" class="user-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="uder-card" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div id="modal-content"> </div> </div> </div> <!-- User Grid --> <div id="user-grid" class="row container fluid-container"></div>

https://jsonplaceholder.typicode.com/users has a query parameter id which you can supply from currentTarget.