我无法在点击时定位特定的 div，目前当我点击“currentTarget.id”时，该函数返回我的 JSON 文件中的所有 div 对象，而不是被点击的那个。
我尝试了许多不同的解决方案，从针对后端 heroku 服务器到在客户端本地定位它，但是每次尝试都“几乎解决”/ 90% 的方式，但从未完全解决。
我认为在尝试将动态 JSON 值映射到用户卡时会出现问题，并且它与“currentTarget.id”代码冲突？
因为当我删除 map/reduce 函数时，我可以单独定位 div，但没有“map”和“return”代码，我无法显示我需要的所有必需数据。
感谢您的宝贵时间，任何帮助将不胜感激。
最好的，史蒂夫。
//THIS IS THE CODE TO CREATE DYNAMIC CLASSES FOR INDUSTRY VALUES
const industry_class = {
"Health": "health-badge",
"Education": "education-badge",
"Construction": "construction-badge",
"Science": "science-badge"
};
//THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
var userJSON = 'https://mighty-oasis-08666.herokuapp.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 CARD
var userCard = populateUsers.map(({id, industry}) => {
let cls = industry_class[industry.trim()] || "";
return `
<div class='col col-4 align-items-stretch user-container'>
<div id="${id}" class="card user-card">
<div class="card-body">
<h6 class="industry-type title ${cls}">${industry}</h6>
</div>
</div>
</div>`;
}).join("");
$('#user-grid').append(userCard)
//THIS IS THE CODE TO APPLY DYNAMIC CLASSES TO INDUSTRY VALUES
$userType.each(function() {
var $this = jQuery(this);
let industry = $this.text().trim();
if (industry in industry_class) {
$this.addClass(industry_class[industry]);
}
});
});
//THIS IS THE CODE TO RUN WHEN USER CARD IS CLICKED
$("#user-grid").on("click", ".user-card", function (e) {
//THIS IS THE CODE TO CREATE DYNAMIC CLASSES FOR INDUSTRY VALUES
const industry_class = {
"Health": "health-badge",
"Education": "education-badge",
"Construction": "construction-badge",
"Science": "science-badge"
};
//THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
var userJSON = 'https://mighty-oasis-08666.herokuapp.com/users'
//THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
$.getJSON(userJSON, function(populateUsers) {
//THIS IS THE CODE TO TARGET SPECIFIC JSON OBJECT ID VALUE
const selectedUserId = e.currentTarget.id;
const selectedUserData = populateUsers.find(
(user) => user.id === Number(selectedUserId));
//THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL MODAL CARD
var userModal = populateUsers.map(({id, industry}) => {
let cls = industry_class[industry.trim()] || "";
return `
<div class='col col-4 align-items-stretch user-container'>
<div id="${id}" class="card user-card">
<div class="card-body">
<h6 class="industry-type title ${cls}">${industry}</h6>
</div>
</div>
</div>
`;
}).join("");
//THIS IS THE CODE TO APPEND DIV TO MODAL
$("#modal-content").append(userModal);
//THIS IS THE CODE TO APPLY DYNAMIC CLASSES TO INDUSTRY VALUES
$userType.each(function() {
var $this = jQuery(this);
let industry = $this.text().trim();
if (industry in industry_class) {
$this.addClass(industry_class[industry]);
}
});
});
$("#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("");
});.health-badge {
background-color: purple;
color: green;
height: 80px;
width: 80px;
}
.science-badge {
background-color: black;
color: yellow;
height: 80px;
width: 80px;
}
.construction-badge {
background-color: blue;
color: white;
height: 80px;
width: 80px;
}
.education-badge {
background-color: orangered;
color: black;
height: 80px;
width: 80px;
}<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="hybrid-strain-chronic" 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>