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”类的元素实例，但该功能仅在我点击第一个时才有效。单击第二个或第三个元素时没有任何反应。我是否正确地将我的功能绑定到班级的所有实例？

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>

Answer 2

toggleTerms中的termsSection始终是第一个匹配的元素，您可以考虑将其更改为此

function toggleTerms(event) {
    var termsSection = event.target;
    termsSection.classList.toggle('js-swatch-open');
  }

Toggles类函数仅适用于第一个元素

2 个答案: