如何优化JavaScript中按钮与文本框切换交互的forEach实现？

问题描述 #

页面上有一组按钮，需求如下：

• 点击任意按钮时，该按钮隐藏并替换为对应的文本框
• 点击另一按钮时，所有其他文本框恢复为按钮

当前用双层forEach循环匹配索引的方式实现，觉得这种方法不够合理，想要更简洁高效的方案。

当前代码示例：

buttons.forEach((button, buttonIndex) => {
    button.addEventListener('click', () => {
        popups.forEach((popup, popupIndex) => {
            if (buttonIndex == popupIndex) {
                popup.style.display = 'inline-grid';
                button.style.display = 'none';
            } else {
                popup.style.display = 'none';
                button.style.display = 'inline-grid';
            }
        });
    });
});

优化方案 #

方案1：用自定义属性绑定对应关系 #

给每个按钮和对应的文本框添加相同的data-id属性，点击按钮时直接定位对应文本框，同时统一重置所有元素状态，避免双层循环：

// 先给按钮和文本框绑定对应ID
buttons.forEach((btn, idx) => {
  btn.dataset.id = idx;
  popups[idx].dataset.id = idx;
});

// 绑定点击事件
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const targetId = btn.dataset.id;
    // 重置所有按钮和文本框的默认状态
    buttons.forEach(b => b.style.display = 'inline-grid');
    popups.forEach(p => p.style.display = 'none');
    // 切换当前点击的按钮和对应文本框
    btn.style.display = 'none';
    document.querySelector(`.popup[data-id="${targetId}"]`).style.display = 'inline-grid';
  });
});

方案2：利用DOM相邻关系（如果结构允许） #

如果按钮和对应文本框在DOM中是相邻元素（比如按钮紧跟文本框），直接通过DOM遍历定位，不用额外绑定属性：

buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 重置所有元素状态
    buttons.forEach(b => {
      b.style.display = 'inline-grid';
      const popup = b.nextElementSibling; // 假设文本框是按钮的下一个兄弟元素
      if (popup) popup.style.display = 'none';
    });
    // 切换当前按钮和文本框
    btn.style.display = 'none';
    btn.nextElementSibling.style.display = 'inline-grid';
  });
});

方案3：用变量记录激活状态（减少遍历次数） #

维护变量记录当前显示的文本框和对应的按钮，点击新按钮时只处理之前激活的元素和当前元素，避免全量遍历：

let activePopup = null;
let activeButton = null;

buttons.forEach((btn, idx) => {
  btn.addEventListener('click', () => {
    // 点击已激活的按钮，切换回初始状态（可选逻辑）
    if (activeButton === btn) {
      btn.style.display = 'inline-grid';
      activePopup.style.display = 'none';
      activePopup = null;
      activeButton = null;
      return;
    }
    // 重置之前激活的元素
    if (activePopup) {
      activePopup.style.display = 'none';
      activeButton.style.display = 'inline-grid';
    }
    // 设置新的激活元素
    activeButton = btn;
    activePopup = popups[idx];
    btn.style.display = 'none';
    activePopup.style.display = 'inline-grid';
  });
});

方案4：用CSS类控制（推荐，符合关注点分离） #

把显示隐藏逻辑交给CSS类，JS只负责切换类名，代码更简洁易维护：
首先定义CSS：

.btn-group .btn {
  display: inline-grid;
}
.btn-group .popup {
  display: none;
}
.btn-group .btn.hidden {
  display: none;
}
.btn-group .popup.active {
  display: inline-grid;
}

然后编写JS：

buttons.forEach((btn, idx) => {
  btn.addEventListener('click', () => {
    // 移除所有元素的状态类
    buttons.forEach(b => b.classList.remove('hidden'));
    popups.forEach(p => p.classList.remove('active'));
    // 给当前元素添加状态类
    btn.classList.add('hidden');
    popups[idx].classList.add('active');
  });
});

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