동적으로 생성 된 "사용자 그리드"와 동적으로 생성 된 "사용자 모달"이 있습니다. 모달은 "사용자 카드"를 클릭 할 때 트리거됩니다 (이 기능은 훌륭하게 작동합니다).
그러나 특정 "사용자 카드"를 클릭하면 선택한 사용자 카드 정보 만로드하는 것이 아니라 모든 사용자 카드에 대한 모든 사용자 데이터를로드합니다.
기본적으로 "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>
어떤 도움이라도 대단히 감사하겠습니다!
고마워요, 스티브.
이벤트 객체는 currentTarget
클릭 한 항목을 참조하는 속성을 포함 합니다. 클릭 한 아이템 ID를 추출하기 위해 사용할 수 있습니다.
그런 다음 find
json에서 ID로 사용자가 필요 합니다.
//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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다