移动端点击<i>元素，如何动态匹配对应<figcaption>并设置opacity？

Great question! Moving away from hardcoded [data-team] matches is such a smart call—it makes your code way more maintainable, especially with 12 team items (and any future additions you might make). Here are a couple of clean, dynamic approaches to solve this:

1. Use DOM Hierarchy (Best for Long-Term Maintainability) #

Instead of relying on custom attributes, leverage the existing parent-child/sibling relationships in your HTML. Since the <i> button and target <figcaption> are both inside the same .team-item container, you can traverse the DOM to find the right element without any hardcoded identifiers.

First, update your CSS to use a class for visibility (this is better than directly manipulating inline styles, as it keeps style logic separated):

figcaption {
  opacity: 0;
  transition: opacity 0.3s ease; /* Optional: Adds a smooth fade effect */
}
figcaption.active {
  opacity: 1;
}

Then implement the JavaScript:

// Bind click event to all info buttons
document.querySelectorAll('#more-info').forEach(btn => {
  btn.addEventListener('click', function() {
    // Find the closest parent .team-item container for the clicked button
    const parentTeamItem = this.closest('.team-item');
    // Locate the figcaption inside this specific container
    const targetFigcaption = parentTeamItem.querySelector('figcaption');
    // Toggle the active class to show/hide the figcaption
    targetFigcaption.classList.toggle('active');
  });
});

Why this works so well: #

• closest('.team-item') climbs up the DOM tree to find the nearest parent container that matches the selector—this means it works even if you adjust the inner structure of .team-item later.
• No need for [data-team] attributes at all—your code automatically adapts to any new .team-item you add, no extra setup required.

2. Refined Data-Attribute Approach (If You Want to Keep Custom Attributes) #

If you still prefer using data-team but want to avoid hardcoded logic, use the element's dataset property to dynamically target the matching figcaption:

document.querySelectorAll('#more-info').forEach(btn => {
  btn.addEventListener('click', function() {
    const teamId = this.dataset.team;
    // Dynamically construct the selector instead of hardcoding values
    const targetFigcaption = document.querySelector(`figcaption[data-team="${teamId}"]`);
    targetFigcaption.classList.toggle('active');
  });
});

This removes the "hardcoded" feel because you're using the button's own data attribute to build the selector, rather than writing out specific team IDs manually.

Final Recommendation #

The DOM hierarchy method is hands-down the best choice here. It’s more robust, requires less markup, and ensures your code stays flexible as your team list grows or your HTML structure evolves.

内容的提问来源于stack exchange，提问作者Old-fashioned-dev