问题描述
我在点击时无法定位特定的 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","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>
解决方法
您可以使用 .filter
来过滤从服务器返回的数据,并且只获取 id
的值相同的 JSON 数组。此外,id 是唯一的,所以我们只需要获取一条记录,这就是为什么不需要使用 .each
循环,只需在过滤后使用 values[0]
此内容数据访问记录,然后使用它访问所有字段。
演示代码:
const industry_class = {
"Health": "health-badge","Education": "education-badge","Construction": "construction-badge","Science": "science-badge"
};
var userJSON = 'https://mighty-oasis-08666.herokuapp.com/users'
$.getJSON(userJSON,function(populateUsers) {
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)
});
$("#user-grid").on("click",".user-card",function(e) {
var userJSON = 'https://mighty-oasis-08666.herokuapp.com/users'
const selectedUserId = parseInt($(this).attr('id'));
$.getJSON(userJSON,function(populateUsers) {
//get only json where id matches
var values = $(populateUsers)
.filter(function(i,n) {
return n.id === selectedUserId;
});
let cls = industry_class[values[0].industry.trim()] || "";
//gte all dataas..
$("#modal-content").append(`<div class='user-container'><div class="${cls}"><h6 class="industry-type title">${values[0].industry}</h6> <h5>${values[0].name}</h5> <h5>${values[0].username}</h5></div></div></div>`);
$("#user-modal").modal({
show: true
});
});
});
$("#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>