将动态 div 链接到动态模态

Question

我有一个动态生成的“用户网格”和一个动态生成的“用户模式”。 单击“用户卡”时会触发模式（此功能效果很好）。

但是，当单击特定的“用户卡”时……它不仅会加载选定的用户卡信息，还会加载所有用户卡的所有用户数据……

本质上，我想单击“Leanne Graham Card”并仅显示“Leanne Graham Modal”内容。

已包含以下代码

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

任何帮助将不胜感激！

非常感谢，史蒂夫。

Answer 1

事件 object 包含指向单击项目的currentTarget属性。 您可以使用它来提取点击的项目 ID。

然后你只需要在你得到的 json 中通过 id find用户

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

正如 Oleksandr Sakun 所说，事件 object 包含 currentTarget ，其中包含您单击的内容的 id。

 //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有一个查询参数 id，您可以从 currentTarget 提供它。