点击.open-question-popup锚点，如何将父div标题传入共享弹窗#ask-question-div

Got it, let's tackle this problem. You want every .open-question-popup anchor to pass its parent div's title into the #ask-question-div popup header when clicked. Here's a straightforward, efficient way to do it with vanilla JavaScript (no jQuery needed, though you could adapt it if you use jQuery):

Step 1: Prepare Your Popup HTML #

First, make sure your #ask-question-div has a dedicated element for the header. Add something like this inside the popup:

<div id="ask-question-div">
  <div id="popup-header" class="popup-header"></div>
  <!-- Rest of your popup content -->
</div>

Step 2: Add the JavaScript Logic #

We'll use event delegation to handle all .open-question-popup anchors with a single listener (perfect for multiple identical anchors). This code will:

1. Catch clicks on any of your anchors
2. Grab the parent div's title
3. Insert it into the popup header
4. Handle the popup display (works with either CSS :target or manual class toggling)

document.addEventListener('click', function(e) {
  // Find the closest anchor with the target class (handles clicks on child elements too)
  const popupTrigger = e.target.closest('.open-question-popup');
  if (!popupTrigger) return; // Exit if click wasn't on our anchor

  // Prevent default anchor behavior temporarily to set the title first
  e.preventDefault();

  // --- Adjust these selectors to match your actual HTML structure ---
  const parentDiv = popupTrigger.closest('.your-parent-div-class'); // Replace with your parent div's selector (class/id)
  const parentTitleElement = parentDiv.querySelector('h2, .parent-title'); // Replace with your title element's selector (e.g., h3, .section-title)
  // -----------------------------------------------------------------

  if (!parentTitleElement) return; // Exit if no title found (avoid errors)

  // Get the clean title text and insert it into the popup header
  const titleText = parentTitleElement.textContent.trim();
  const popupHeader = document.querySelector('#ask-question-div #popup-header');
  if (popupHeader) {
    popupHeader.textContent = titleText;
  }

  // Option 1: If you use CSS :target to show the popup (your original approach)
  window.location.hash = popupTrigger.getAttribute('href');

  // Option 2: If you use a CSS class to toggle visibility (replace with your class)
  // document.querySelector('#ask-question-div').classList.add('active');
});

Step 3: Adjust for Your HTML Structure #

You'll need to tweak two key selectors in the code above:

• .your-parent-div-class: Replace this with the actual selector for the parent div containing the anchor (e.g., .article-card, #section-1)
• h2, .parent-title: Replace this with the selector for the title element inside that parent div (e.g., .card-title, h3.section-header)

Example CSS (If Using Class Toggle) #

If you don't rely on :target to show the popup, add this CSS to control visibility:

#ask-question-div {
  display: none;
  /* Add your popup styling here (positioning, background, etc.) */
}

#ask-question-div.active {
  display: block;
  /* Or use opacity/transform for smooth transitions */
}

Why This Works #

• Event delegation ensures all existing and future .open-question-popup anchors are handled (no need to bind events individually)
• We use closest() to safely traverse up the DOM to find the parent div, even if the anchor is nested inside other elements
• The code includes checks to avoid errors if elements aren't found, making it robust

内容的提问来源于stack exchange，提问作者farah el agha