JS中forEach的替代方案及hover父元素仅显示其子按钮的实现方法

一、先解决你的按钮显示问题 #

你当前代码的核心问题是：每次触发mouseover/mouseout时，都遍历了所有按钮并修改样式，导致所有按钮同步变化。要实现仅操作当前悬停卡片内的按钮，只需要在当前卡片的范围内查找对应的按钮即可，无需全局操作所有按钮。

修改后的JavaScript代码：

const cardElements = document.querySelectorAll('.middle_section__president_section');

cardElements.forEach((cardElement) => {
    // 只获取当前卡片内的目标按钮
    const targetButton = cardElement.querySelector('.president_section__button');
    
    cardElement.addEventListener('mouseover', () => {
        targetButton.style.height = "50px";
        targetButton.style.opacity = "1";
        targetButton.style.border = "3px solid rgb(129, 129, 129)";
    });
    
    cardElement.addEventListener('mouseout', () => {
        targetButton.style.height = "0px";
        targetButton.style.opacity = "0";
        targetButton.style.border = "0px solid rgb(129, 129, 129)";
    });    
});

更优雅的方案：用CSS实现（无需JavaScript）

这种交互完全可以用CSS伪类实现，性能更好、代码更简洁：

/* 默认隐藏按钮 */
.middle_section__president_section .president_section__button {
    height: 0;
    opacity: 0;
    border: 0 solid rgb(129, 129, 129);
    transition: all 0.3s ease; /* 可选：添加过渡动画让效果更流畅 */
}

/* 鼠标悬停卡片时显示按钮 */
.middle_section__president_section:hover .president_section__button {
    height: 50px;
    opacity: 1;
    border: 3px solid rgb(129, 129, 129);
}

二、JavaScript中forEach的替代方案 #

针对NodeList（querySelectorAll返回的结果）或数组，常见的替代方案有：

• for...of循环（ES6+推荐）：语法直观，支持遍历所有可迭代对象

const cardElements = document.querySelectorAll('.middle_section__president_section');

for (const card of cardElements) {
    const targetButton = card.querySelector('.president_section__button');
    // 绑定事件逻辑...
}

• 传统for循环：兼容性最好，适合老项目

const cardElements = document.querySelectorAll('.middle_section__president_section');

// 方式1：直接遍历NodeList的length
for (let i = 0; i < cardElements.length; i++) {
    const card = cardElements[i];
    // 逻辑...
}

// 方式2：转换为数组后遍历
const cardArray = Array.from(cardElements);
for (let i = 0; i < cardArray.length; i++) {
    const card = cardArray[i];
    // 逻辑...
}

• Array.prototype.map：如果需要基于遍历生成新数组可以用，单纯遍历也能实现（但语义上forEach更贴合）

Array.from(cardElements).map(card => {
    const targetButton = card.querySelector('.president_section__button');
    // 绑定事件逻辑...
});

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