我该如何用for循环编写这些js代码？

Question

我有 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');
  }
)

Answer 1

使用简单的forEach循环classList.toggle(className: string, force: boolean)：

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

btnsOpenContent.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    content.forEach((cnt, idx) => cnt.classList.toggle('show-modal', idx === index))
  })
})