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

Question

我不使用Jquery并且不想，我想在下一个项目与同一个类切换后再次切换一个类。所以上一个类被删除了。并且一次只能打开一个班级。

我尝试将document.getElementsByClassName(".panel").removeClass("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将引用clicked元素。

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>

Answer 2

它应该是classList.remove("open")，而不是removeClass("open")

此外，它不起作用，因为getElementsByClassName将返回一个元素集合，你不能一次性删除它们的类。您必须为面板中的每个元素调用它。

Array.from(document.getElementsByClassName(".panel")).forEach(element => element.classList.remove("open"))

或者首先你可以做到没有把它变成阵列

const panels = document.getElementsByClassName(".panel")
for (let panel of panels) {
  panel.classList.remove("open")
}