使用 Javascript 在 foreach 循环中使用 getElementsByClassName 切换类

Question

我无法让这个切换类脚本在所有项目 div 中工作。

它的设置是，当单击父元素时，两个子元素都会切换类.hide，它的功能更像是交换。

注意到这个使用 Jquery Toggle classes inside a foreach loop 的类似帖子，我采取了不同的方法，因为在这种情况下有多个类需要更改。

我使用getElementsByClassName 并将NodeList 中的元素定义为[0]。这适用于第一个项目 div 和更改为 [1] 的第二个。

但是，我一直坚持如何在所有后续项目 div 中同时进行这项工作。这是用循环完成的吗？还是使用变量？还是使用this 关键字？

我正在使用 Kirby CMS 生成内容部分，因此项目 div 模板在 foreach 循环内。

document.getElementsByClassName('read-more-div')[0].addEventListener('click', function() {

  document.getElementsByClassName('read-more-btn1')[0].classList.toggle('hide');
  document.getElementsByClassName('read-more-btn2')[0].classList.toggle('hide');

  return false

})

body {
  background-color: #000000;
  color: #ffffff;
}

p,
button {
  background-color: #000000;
  color: #ffffff;
  border: none;
  padding: 0;
  margin: 0;
}

.read-more-btn1 {
  color: #888888;
  cursor: s-resize;
}

.read-more-btn2 {
  cursor: n-resize;
}

.read-more-btn1:hover {
  color: #ffffff;
}

.hide {
  display: none;
}

<div>Project A

  <div class="read-more-div">

    <button class="read-more-btn1">Read more...</button>
    <p class="read-more-btn2 hide">Toggle this project text</p>

  </div>

</div>

<div>Project B

  <div class="read-more-div">

    <button class="read-more-btn1">Read more...</button>
    <p class="read-more-btn2 hide">Toggle this project text</p>

  </div>

</div>

<div>Project C

  <div class="read-more-div">

    <button class="read-more-btn1">Read more...</button>
    <p class="read-more-btn2 hide">Toggle this project text</p>

  </div>

</div>

Answer 1

有很多方法可以做到这一点。确保将事件侦听器添加到所有 div 而不仅仅是第一个。 查看您当前的代码，您可以遵循这种方法。

this inside 事件监听器属于触发事件的元素。因此，当我们执行this.getElementsByClassName 时，我们只在该特定元素内查询类。

getElementsByClassName 不返回数组。它返回一个类数组的集合。要在类似数组的对象上使用forEach()，需要将其转换为数组。使用...（扩展）运算符将集合转换为数组。

[...document.getElementsByClassName('read-more-div')].forEach(x => x.addEventListener('click', function() {

  this.getElementsByClassName('read-more-btn1')[0].classList.toggle('hide');
  this.getElementsByClassName('read-more-btn2')[0].classList.toggle('hide');

  return false

}));

body {
  background-color: #000000;
  color: #ffffff;
}

p,
button {
  background-color: #000000;
  color: #ffffff;
  border: none;
  padding: 0;
  margin: 0;
}

.read-more-btn1 {
  color: #888888;
  cursor: s-resize;
}

.read-more-btn2 {
  cursor: n-resize;
}

.read-more-btn1:hover {
  color: #ffffff;
}

.hide {
  display: none;
}

<div>Project A

  <div class="read-more-div">

    <button class="read-more-btn1">Read more...</button>
    <p class="read-more-btn2 hide">Toggle this project text</p>

  </div>

</div>

<div>Project B

  <div class="read-more-div">

    <button class="read-more-btn1">Read more...</button>
    <p class="read-more-btn2 hide">Toggle this project text</p>

  </div>

</div>

<div>Project C

  <div class="read-more-div">

    <button class="read-more-btn1">Read more...</button>
    <p class="read-more-btn2 hide">Toggle this project text</p>

  </div>

</div>