Javascript 切换类函数仅适用于第一个元素

大家好，我编写了以下代码，以便能够在单击时打开和关闭一个类的元素

要素：

测试

功能：

function newFunctionTest() {
    var termsToggles = document.querySelectorAll('.swatch-label-size');

    for (var i = 0; i < termsToggles.length; i++) {
        termsToggles[i].addEventListener('click', toggleTerms);
    }
}

function toggleTerms() {
    var termsSection = document.querySelector('.swatch-label-size');
    termsSection.classList.toggle('js-swatch-open');
} 

函数newFunctionTest（）{
var termsToggles=document.querySelectorAll（'.swatch标签大小'）；
对于（变量i=0；i

---

在我的DOM中，元素上有三个“.swatch label size”类的实例，但该函数只有在单击第一个实例时才起作用。单击第二个或第三个元素时不会发生任何事情。我没有正确地将我的函数绑定到类的所有实例吗？

您再次在侦听器函数

toggleTerms

中获取元素，因此删除该元素，它就会工作。只需单击下面代码段中的文本即可获得切换类的效果。为简单起见，我切换了更改字体颜色的类：

函数newFunctionTest（）{
var termsToggles=document.querySelectorAll（'.swatch标签大小'）；
对于（变量i=0；i
.js样例打开{
颜色：红色；
}
test1
测试2
Test3
 TopGeleSerm中的TrimeSt切片将永远是第一个匹配元素，您可以考虑将其更改为该
function toggleTerms(event) {
    var termsSection = event.target;
    termsSection.classList.toggle('js-swatch-open');
  } 

您正在选择
toggleTerms
中的元素，而不是使用click处理程序绑定到的元素。