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

Question

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

它被设置为当单击父元素时，两个子元素都会切换 class .hide，这更像是一个交换。

注意到这个使用 Jquery 的类似 post，我采用了不同的方法，因为在这种情况下有多个 class 需要更改。

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

但是，我一直在思考如何使它同时在所有后续项目 div 中发挥作用。这是用循环完成的吗？还是使用变量？或者使用 this 关键字？

我正在使用 Kirby CMS 生成内容部分，因此项目 divs 在 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 event listener 属于触发事件的元素。因此，当我们执行 this.getElementsByClassName 时，我们仅在该特定元素内查询类。

getElementsByClassName 不是 return 数组。它 return 是一个 类数组 的集合。要在类似数组的对象上使用 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>

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

Toggle classes with getElementsByClassName inside a foreach loop with Javascript

html

javascript

css

nodelist

getelementsbyclassname

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

Toggle classes with getElementsByClassName inside a foreach loop with Javascript

html

javascript

css

nodelist

getelementsbyclassname

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