javascript - 当我们通过单击事件切换另一个类时，如何删除先前切换的类

Question

我不使用 Jquery 并且不想使用，我想在下一个项目与同一类切换后再次切换类。因此前一类中的类被删除。并且一次只能打开一个类。

我尝试添加 document.getElementsByClassName(".panel").removeClass("open");到首先删除所有切换类的函数('open')但这不起作用。我尝试添加一个 id 并尝试从该 id 中删除一个类仍然不起作用

function toggleOpen() {

     document.getElementsByClassName(".panel").removeClass("open");//this give me error
      this.classList.toggle('open');


    }
    function toggleActive(e) {
      if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
      }

    }



    const panels = document.querySelectorAll('.panel');
    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

结果

Uncaught TypeError: document.getElementsByClassName(...).removeClass is not a function

Answer 1

由于您要向每个元素添加事件监听器，因此不需要 document.getElementsByClassName(".panel").removeClass("open");。函数内的 this 将引用单击的元素。

removeClass 是 jquery 方法，该方法将不可用。document.getElementsByClassName 返回元素列表，因此您需要对其进行循环。

尝试以下示例。

function toggleColor() {
      this.classList.toggle('red');
}


const panels = document.querySelectorAll('.panel');
panels.forEach(panel => panel.addEventListener('click', toggleColor));

.green {
  color: green;
}
.red {
  color: red;
}

<p class="panel green">H1<p>
<p class="panel red">H2<p>
<p class="panel green">H3<p>
<p class="panel  red">H4<p>