如何使用for循环改写点击按钮切换内容的JavaScript代码

• 页面包含3个触发按钮、3个对应的内容区域，交互要求：点击任意按钮时展示对应内容，切换点击其他按钮时，自动隐藏其余内容、展示新点击按钮匹配的内容。
• 当前已通过逐个给按钮绑定事件的方式实现效果，需要通过for循环改写，优化重复冗余的代码。

const content = document.querySelectorAll('.content');
const contentClose = document.querySelector('.close-content');
const btnsOpenContent = document.querySelectorAll('.show-content');


btnsOpenContent[0].addEventListener('click',
  function() {
    content[1].classList.remove('show-modal');
    content[2].classList.remove('show-modal');
    content[0].classList.add('show-modal');
  }
)

btnsOpenContent[1].addEventListener('click',
  function() {
    content[0].classList.remove('show-modal');
    content[2].classList.remove('show-modal');
    content[1].classList.add('show-modal');
  }
)

btnsOpenContent[2].addEventListener('click',
  function() {
    content[0].classList.remove('show-modal');
    content[1].classList.remove('show-modal');
    content[2].classList.add('show-modal');
  }
)

核心逻辑是利用按钮和内容区域索引一一对应的关系，遍历按钮集合统一绑定事件，触发时先批量重置所有内容的隐藏状态，再单独给当前匹配的内容加展示类，完全不需要重复写单条绑定逻辑。

优化后代码：

const content = document.querySelectorAll('.content');
const contentClose = document.querySelector('.close-content');
const btnsOpenContent = document.querySelectorAll('.show-content');

// 循环遍历所有按钮，统一绑定点击事件
for (let i = 0; i < btnsOpenContent.length; i++) {
  btnsOpenContent[i].addEventListener('click', () => {
    // 第一步：隐藏所有内容区域，不需要逐个指定索引移除类
    content.forEach(item => item.classList.remove('show-modal'));
    // 第二步：只展示当前点击按钮对应索引的内容
    content[i].classList.add('show-modal');
  })
}

// 原代码已经获取了关闭按钮，可以补充关闭逻辑
contentClose.addEventListener('click', () => {
  content.forEach(item => item.classList.remove('show-modal'));
})

优化优势 #

• 代码量大幅缩减，没有重复的事件绑定逻辑
• 扩展性强，后续如果增加/减少按钮和对应内容块，只要保持DOM顺序对应，不需要修改JS逻辑
• 逻辑更清晰，先统一重置状态再激活当前项，不会出现漏移除类导致的多内容同时展示的bug

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