JavaScript新手求助：优化图片弹窗按钮代码，避免编写8个addEventListener

Hey there! Awesome catch noticing the redundant event listeners—when you're dealing with multiple similar elements, repeating code is not just tedious but also harder to maintain. Let's refactor this into a scalable, clean solution that works for 8 (or even more!) buttons without writing duplicate code.

Step 1: Update Your HTML with Shared Classes & Data Attributes #

First, let's standardize your buttons and lightboxes so we can target them generically:

• Add a shared class like lightbox-trigger to all your button divs
• Add a data-target attribute to each button that matches the ID of its corresponding lightbox
• (Optional but helpful) Add a shared class like lightbox to all your lightbox containers for easier CSS management

Example button HTML:

<div class="sectionGrid__div--circle lightbox-trigger" id="lightboxBut_1" data-target="lightboxOpen_1"> 
  <img src="https://source.unsplash.com/100x100?mountain" alt="Mountain"> 
</div>

<!-- Repeat for buttons 2-8, updating data-target to match their lightbox IDs (lightboxOpen_2, etc.) -->

Example lightbox HTML (added lightbox class):

<div class="lightbox__container lightbox" id="lightboxOpen_1"> 
  <div class="lightbox__container--left"> 
    <h3 class="sstitleStyle">Lightbox 1</h3> 
    <p class="paraStyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat culpa neque dicta unde, repellendus consectetur a sit autem perspiciatis tempore quasi odio earum ipsam assumenda. Aspernatur vel iure earum ad!</p> 
  </div> 
  <div class="lightbox__container--right"> 
    <img src="https://source.unsplash.com/500x500?mountain" alt=""> 
  </div> 
</div>

Step 2: Use Event Delegation for a Single Listener #

Instead of attaching 8 separate addEventListener calls, we'll use event delegation—attach one listener to a parent element (or even the document), and check if the clicked element is a lightbox trigger. This works because events bubble up the DOM tree.

Here's the optimized JavaScript:

// Attach a single click listener to the document
document.addEventListener('click', function(e) {
  // Find the closest lightbox trigger (in case the user clicks the img inside the div)
  const trigger = e.target.closest('.lightbox-trigger');
  
  // If we didn't click a trigger, exit early
  if (!trigger) return;

  // Get the target lightbox ID from the data attribute
  const targetLightboxId = trigger.dataset.target;
  const lightbox = document.getElementById(targetLightboxId);

  // If the lightbox exists, show it
  if (lightbox) {
    console.log(`Opening ${targetLightboxId}`);
    lightbox.style.display = 'block';
  }
});

Why This Works #

• Scalable: Add as many buttons/lightboxes as you want—no need to modify the JavaScript at all, just update the HTML with the right data-target
• Maintainable: All logic lives in one place, so if you need to change how lightboxes open (e.g., add an animation), you only update one piece of code
• Performance: Fewer event listeners mean less memory usage compared to binding 8 separate listeners

Bonus: Clean Up Initial Lightbox State #

Add this CSS to ensure all lightboxes are hidden by default (instead of setting it inline):

.lightbox {
  display: none;
}

Optional: Add Close Functionality (Bonus) #

If you want to let users close the lightbox, you can extend this pattern—add a close button with a data-close attribute, or listen for clicks outside the lightbox content. For example:

document.addEventListener('click', function(e) {
  // Handle lightbox open
  const trigger = e.target.closest('.lightbox-trigger');
  if (trigger) {
    const targetLightboxId = trigger.dataset.target;
    const lightbox = document.getElementById(targetLightboxId);
    if (lightbox) lightbox.style.display = 'block';
    return;
  }

  // Handle lightbox close (e.g., clicking a close button)
  const closeBtn = e.target.closest('[data-close]');
  if (closeBtn) {
    const lightbox = closeBtn.closest('.lightbox');
    if (lightbox) lightbox.style.display = 'none';
    return;
  }

  // Optional: Close when clicking outside the lightbox content
  const lightbox = e.target.closest('.lightbox');
  if (!lightbox) {
    document.querySelectorAll('.lightbox').forEach(lb => lb.style.display = 'none');
  }
});

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