Javascript从X元素中添加/删除类，但1

所以我有这些flex面板，当我点击其中一个时，我添加了两个类，但当我点击另一个时，我想从其他flex中删除这些类，并且只应用于当前点击的flex。上面的代码是我到目前为止找到的。这是可行的，但还有其他“干净/优雅”的方法吗

<div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>

---

尽管您没有提供HTML，但我相信我理解您的意图。我将用jQuery试一试

使用jQuery：

let $all = $('.open', '.open-active');
$(".panel").click(function(event) {
    $all.each(function(index, e2) {
        if (!$(event.target).is(e2)) {
            $(e2).removeClass('open', 'open-active');
        }
    });
});

---

您可以在父元素上侦听冒泡的

单击
事件。通过使用该方法（FF和Chrome），代码可以简化为：

const panels = document.querySelector('.panels');

panels.addEventListener('click', function(e) {
    const panel = panels.querySelector('.open');
    if (panel) panel.classList.remove('open', 'open-active');
    e.target.closest('.panel').classList.add('open', 'open-active');
}); 

或者，使用记住当前选定面板的闭合：

(function (panels, panel) {
    panels.addEventListener('click', function(e) {
        if (panel) panel.classList.remove('open', 'open-active');
        (panel = e.target.closest('.panel')).classList.add('open', 'open-active');
    });
})(document.querySelector('.panels'));

html示例？？“上面的代码”。。。上面没有代码。。。请提供您的html标记。Html添加了您的操作方式有什么问题？似乎您并不真正需要
切换
，因为您可以只使用
this.classList.add（'open'，'open active'）
，但除此之外，问题出在哪里？没什么错，这看起来不像是一种“干净”的方法，在toggleOpen函数中使用外部作用域数组。是的，我在玩切换方法，没有把它改成“添加”。没有具体的方法/事件或类似的东西可以使用？我看不到OP使用jQuery的迹象，所以我不知道这有什么关系。除此之外，你的语法是无效的，代码也不能满足OP的要求。我很抱歉，我想既然没有人回答，我就试试看。我相信我已经解决了语法问题。还有一个语法问题，但即使在你解决了这个问题之后，代码对于OP正在做的事情仍然是不正确的。我已经解决了event.target问题。忘记它发送的是事件而不是元素。还有别的问题吗？我假设他想要删除每个元素的类，除了他单击的那个元素。他已经提供了添加它们的假设逻辑。是的，逻辑仍然是错误的，对于非jQuery问题，它仍然是一个不相关的jQuery解决方案。很高兴他们正在包含一个
.closest（）
方法。不是很好，他们选择了jQuery糟糕的命名。一些更具描述性的东西，比如
elem.ascendTo（选择器）
或
elem.get祖先（选择器）
，或者一些更好的东西，依我看。
(function (panels, panel) {
    panels.addEventListener('click', function(e) {
        if (panel) panel.classList.remove('open', 'open-active');
        (panel = e.target.closest('.panel')).classList.add('open', 'open-active');
    });
})(document.querySelector('.panels'));