I need some help implementing a javascript feature on this website that I’m developing.
The website have a section with some pictures of different persons. I want to open a modal with content related to that specific person, every time one clicks a picture. So, the content of the modal changes accordingly to the picture clicked.
So far I can make it work but can’t change the information accordingly to the picture I click on. I’m struggling to come up with a solution to change that html. I’m using ES6 Classes and an array of objects to dtore the information about every person but I can’t find a way to make it work and not even sure if that’s the most efficient way. The code, as it is, opens and closes the modal but doesn't isert any html because it's not complete, as I explained. Any ideas? Thank you for your help.
Here is my html:
<!-- members section -->
<section class="content-members section members hidden" id="section-2">
<ul class="list-members">
<li class="list-item list-item-content" data-id="1">
<div class="item-primary">
<div class="item-image">
<img loading="lazy" src="img/hr3_hi.png" alt="Adolfo Mesquita Nunes" class="image-hr">
<div class="item-hovering"></div>
<div class="item-content">
<div class="text">
<h2>hvjhvjhv kjgkgkg kjhkjhkjh</h2>
</div>
</div>
</div>
</div>
</li>
<li class="list-item list-item-content" data-id="2"> … </li>
<li class="list-item list-item-content" data-id="3"> … </li>
<li class="list-item list-item-content" data-id="4"> … </li>
<li class="list-item list-item-content" data-id="5"> … </li>
<li class="list-item list-item-content" data-id="6"> … </li>
<li class="list-item list-item-content" data-id="7"> … </li>
<li class="list-item list-item-content" data-id="8"> … </li>
<li class="list-item list-item-content" data-id="9"> … </li>
<li class="list-item list-item-content" data-id="10"> … </li>
<li class="list-item list-item-content" data-id="11"> … </li>
<li class="list-item list-item-content" data-id="12"> … </li>
</ul>
</section>
<!-- members popup -->
<div class="popup-members">
<!--
<div class="members-hero">
<div class="members-hero-photo">
<img src="" alt="members photo">
</div>
<div class="members-hero-content">
<h1 class="members-hero-name"></h1>
<p class="members-hero-presentation"></p>
<a href="" class="members-hero-email"></a>
</div>
</div>
-->
<button class="members-hero-btn">←</button>
</div>
And javascript:
const popupMembers = document.querySelector('.popup-members');
const members = document.querySelectorAll('.list-item');
const membersPage = document.querySelector('.members-hero');
const closeMembersPage = document.querySelector('.members-hero-btn');
// EVENTS AND FUNCTIONS
// individual members information --------------------
const membersList = [
{
id: '1',
name: 'fulano nunes',
img: 'img/hr1_hi_NoBG.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
},
{
id: '2',
name: 'fulana joaquina',
img: 'img/hr2_hi.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
},
{
id: '3',
name: 'fulana abrantes',
img: '/img/hr3_hi.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
},
{
id: '4',
name: 'fulana carvalho',
img: '/img/hr4_hi.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
},
{
id: '5',
name: 'fulana maria',
img: '/img/hr5_hi.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
},
{
id: '6',
name: 'fulana peniche',
img: '/img/hr6_hi.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
},
{
id: '7',
name: 'fulana cabana',
img: '/img/hr7_hi.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
},
{
id: '8',
name: 'fulano nunes',
img: '/img/hr8_hi.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
},
{
id: '9',
name: 'fulano nunes',
img: '/img/hr9_hi.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
},
{
id: '10',
name: 'fulana bárbara',
img: '/img/hr10_hi.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
},
{
id: '11',
name: 'fulana carvalho',
img: '/img/hr11_hi.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
},
{
id: '12',
name: 'fulana cabana',
img: '/img/hr12_hi.png',
present: 'Minim sint mollit cillum ullamco proident occaecat ex Lorem consequat ea. Deserunt eiusmod enim elit exercitation. Minim eu anim in elit consequat. Sit nisi ea sint consectetur laborum nostrud. Tempor laborum ea culpa do eu exercitation irure labore nulla excepteur dolor.',
email: 'example@email.com'
}
];
// render members --------------------
class MembersIND {
constructor(id, name, img, present, email) {
this.id = id;
this.name = name;
this.img = img;
this.present = present;
this.email = email;
};
// render member
renderMember (img, name, present, email) {
let html = `<div class="members-hero">
<div class="members-hero-photo">
<img src="${this.img}" alt="members photo">
</div>
<div class="members-hero-content">
<h1 class="members-hero-name">${this.name}</h1>
<p class="members-hero-presentation">
${this.present}
</p>
<a href="mailto:example@example.com" class="members-hero-email">${this.email}</a>
</div>
</div>`;
membersPage.insertAdjacentHTML('afterbegin', html);
};
};
// const someMember = new MembersIND();
// someMember.renderMember();
// members control --------------------
class MembersGEN {
constructor() {
members.forEach(m => {m.addEventListener('click', this.openModal.bind(this))});
closeMembersPage.addEventListener('click', this.closeModal.bind(this));
};
// show modal
openModal (e) {
// detect member
const memberId = e.target.closest('.list-item').getAttribute('data-id');
// show modal
popupMembers.style.display = 'block';
// fade-in
setTimeout(() => {
popupMembers.style.opacity = '1';
}, 100);
};
// close modal
closeModal() {
// hide modal
popupMembers.style.opacity = '0';
// fade-out
setTimeout(() => {
popupMembers.style.display = 'none';
}, 500);
};
};
const member = new MembersGEN();
