javascript - 从一个元素中删除类，同时使用 javascript 将该类添加到另一个元素

Question

这个问题很难用标题来概括，但我得到的是一组 panel 类的元素。当我点击一个面板时，我向它添加了一个 open 类。如果另一个 panel 已经有 open 类，我还想删除 open 类。

代码如下:

  const panels = document.querySelectorAll('.panel');

function toggleOpen() {
  this.classList.toggle('open');
}

panels.forEach(panel => panel.addEventListener('click', toggleOpen));

现在我可以将 open 类添加到我想要的任意多个面板中，但我一次只希望一个面板具有 open 类。

有什么帮助吗？

Answer 1

最有效的方法是缓存当前选中的 DOM 节点:

const panels = document.querySelectorAll('.panel');

let openedPanel = null;

function toggleOpen() {
  if (openedPanel)
    openedPanel.classList.remove('open');

  this.classList.add('open');
  openedPanel = this;
}

panels.forEach(panel => panel.addEventListener('click', toggleOpen));

如前所述，委托(delegate)事件会更有效，因此如果所有面板共享某个祖先，您应该将事件监听器添加到该祖先，然后从事件监听器执行类似以下操作:

toggleOpen({target}) {
  const panel = target.closest('.panel')
  if (openedPanel)
    openedPanel.classList.remove('open');

  panel.classList.add('open');
  openedPanel = panel;
}

但正如所说，他们需要共享一个共同的祖先。