【发布时间】：2021-01-18 19:29:02
【问题描述】：
我有一个动态生成的“用户网格”和一个动态生成的“用户模式”。单击“用户卡”时会触发模式（此功能效果很好）。
但是，当点击特定的“用户卡”时……它不仅会加载所选的用户卡信息，还会加载所有用户卡的所有用户数据……
本质上，我想点击“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> 任何帮助将不胜感激！
非常感谢， 史蒂夫。
【问题讨论】：
-
我认为这是因为在您的点击中您没有过滤您点击的内容。我会看的。
-
谢谢你 Ahmet :)
标签： javascript jquery json bootstrap-modal dynamic-html