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

Question

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

元素:

<h4 class="swatch-label-size swatch__label--error">test</h4>

功能:

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');
} 

我的 DOM 中带有“.swatch-label-size”类的元素有三个实例，但该函数仅在我单击第一个时才起作用。单击第二个或第三个元素时没有任何反应。难道我没有正确地将我的函数绑定(bind)到该类的所有实例吗？

Answer 1

您再次在监听器函数 toggleTerms 中获取该元素，因此将其删除即可。只需单击下面代码片段中的文本即可获得切换类的效果。为简单起见，我切换了更改字体颜色的类:

function newFunctionTest() {
  var termsToggles = document.querySelectorAll('.swatch-label-size');
  for (var i = 0; i < termsToggles.length; i++) {
      termsToggles[i].addEventListener('click', toggleTerms);
  }
}

function toggleTerms() {
  this.classList.toggle('js-swatch-open');
} 
//initialize listener
newFunctionTest();

.js-swatch-open{
  color: red;
}

<h4 class="swatch-label-size swatch__label--error">test1</h4>
<h4 class="swatch-label-size swatch__label--error">test2</h4>
<h4 class="swatch-label-size swatch__label--error">test3</h4>