如何将3个按钮的独立addEventListener事件合并为单个通用函数（实现点击对应按钮旋转对应卡片）

Hey there! Let's tackle that code redundancy problem you're dealing with. Right now, you're binding separate click events for each button, which gets messy fast when you add more cards. Here are two solid approaches to create a universal handler that keeps the "click button → rotate matching card" functionality, with the second method being the most scalable.

Approach 1: Batch Bind with a Loop (Index-Based) #

This cleans up your original code by looping through all buttons and using their index to target the matching card. It cuts down on repetition while keeping the core logic you had:

const btnshowrotate = document.querySelectorAll('.Showback');
const rotate = document.querySelectorAll('.rotate');

// Loop through each button and bind the click event
btnshowrotate.forEach((button, index) => {
  button.addEventListener('click', () => {
    rotate[index].style.transform = "rotateY(180deg)";
  });
});

Pros: Way cleaner than writing three separate event bindings. When you add a new card, you just need to make sure the button and card are in the same order in the DOM.
Cons: If you ever reorder, add, or remove cards in the middle of your list, the index matching will break.

Approach 2: Use DOM Hierarchy (Recommended - No Index Dependence) #

This is the better long-term solution. Instead of relying on indexes, we use the button's position in the DOM to find its corresponding card. Looking at your HTML, each .Showback button lives inside a .flip-card-front, which is inside a .flip-card-inner (your .rotate element), which is inside a .flip-card container. We can traverse up the DOM to find the right card:

const btnshowrotate = document.querySelectorAll('.Showback');

btnshowrotate.forEach(button => {
  button.addEventListener('click', () => {
    // Find the closest parent flip-card, then grab its inner rotate element
    const targetCard = button.closest('.flip-card').querySelector('.rotate');
    targetCard.style.transform = "rotateY(180deg)";
  });
});

Why this is better: #

• No more index bugs: Even if you rearrange or add new cards later, this code will still work as long as the button is inside its .flip-card container.
• Zero extra work for new cards: Add as many cards as you want—no need to touch the JavaScript at all.
• More robust: If you tweak your HTML structure (like adding a wrapper div around the button), you just adjust the closest() or querySelector() targets instead of rewriting event bindings.

Bonus: Use CSS Classes Instead of Direct Style Changes #

For even better maintainability, let's move the rotation logic to CSS instead of modifying the style property directly. This keeps all your styling in one place:

1. Add this to your CSS:

.rotate.rotated {
  transform: rotateY(180deg);
}

2. Update your JavaScript to toggle/add the class:

const btnshowrotate = document.querySelectorAll('.Showback');

btnshowrotate.forEach(button => {
  button.addEventListener('click', () => {
    const targetCard = button.closest('.flip-card').querySelector('.rotate');
    // Use add() if you only want to rotate once; use toggle() if you want click to flip back and forth
    targetCard.classList.add('rotated');
    // targetCard.classList.toggle('rotated');
  });
});

Now, if you want to adjust the rotation animation (like changing the speed or adding a bounce), you just edit the CSS instead of digging through JavaScript.

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