点击卡片三点图标触发全部Overlay问题，需仅触发对应卡片Overlay

Hey there! I totally get the frustration—right now clicking the ellipsis icon on any card makes all overlays pop up at once, which isn't the behavior you want. Let's tweak the JavaScript to only trigger the overlay that belongs to the specific card you clicked.

The Root Issue #

Your original projectInfo and closeOverlay functions loop through all overlay elements and add/remove the active-overlay class. That's why every overlay reacts to a single click—we need to narrow our target to just the one linked to the clicked element.

Updated JavaScript Code #

Replace your existing JS with this version:

const moreInfoElement = document.querySelectorAll('.moreinfo');
const close = document.querySelectorAll('.close');

moreInfoElement.forEach(moreInfo => {
  moreInfo.addEventListener('click', projectInfo);
})
close.forEach(indiClose => {
  indiClose.addEventListener('click', closeOverlay);
})

function projectInfo() {
  // Find the parent card container of the clicked ellipsis icon
  const parentCard = this.closest('.project-1');
  // Target only the overlay inside this specific card
  const targetOverlay = parentCard.querySelector('.overlay');
  targetOverlay.classList.add('active-overlay');
}

function closeOverlay() {
  // Find the overlay that contains the clicked close button
  const targetOverlay = this.closest('.overlay');
  targetOverlay.classList.remove('active-overlay');
}

How It Works #

• For the ellipsis click: Using this.closest('.project-1'), we climb up the DOM tree to find the nearest parent card container of the clicked icon. Then we use querySelector('.overlay') inside that container to grab only the overlay belonging to this card.
• For the close button: this.closest('.overlay') directly targets the overlay that holds the close button we clicked, so only that overlay gets hidden.

This way, every interaction stays isolated to the specific card you're interacting with—no more mass overlay displays!

内容的提问来源于stack exchange，提问作者Subin