如何循环和切换具有相同类/VanillaJS 的元素？答案

【问题标题】：How do I loop through and toggle elements with the same class / VanillaJS?如何循环和切换具有相同类/VanillaJS 的元素？
【发布时间】：2019-11-08 10:01:55
【问题描述】：

我正在为搜索引擎做前端，我有一个 div 会根据搜索结果重复多次。所有这些都需要截断文本并显示更多/更少按钮。我正在使用切换类来截断文本。我写了下面的代码，但是，它只适用于第一个 div，我不知道如何让它适用于所有这些。有人可以帮我解释一下吗？

我尝试过使用for 循环，但我认为我做错了什么

HTML

<p class="result-box-description truncate">Lorem ipsum dolor sit amet, magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit...</p>
<span class="show">show more</span>
<p class="result-box-description truncate">Lorem ipsum dolor sit amet, magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit...</p>
<span class="show">show more</span>
<p class="result-box-description truncate">Lorem ipsum dolor sit amet, magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit...</p>
<span class="show">show more</span>

CSS

p.result-box-description {
  @include tipography(14);
  color: #000;
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 1.2em;
  text-align: justify;

}
.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

JavaScript

window.onload = function () {
  document.querySelector('.show').addEventListener('click', textToggle);
};

function textToggle() {
  const paragraphs = document.getElementsByClassName('result-box-description');
  const btn = document.querySelector('.show');

  for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].classList.toggle('truncate');
  }

  if (paragraphs.classList.contains('truncate')) {
    btn.innerHTML = 'show more';
  } else {
    btn.innerHTML = 'show less';
  }
}

我只是希望所有 div 都以相同的方式工作，因为我不知道实际的数字是多少。

【问题讨论】：

查看developer.mozilla.org/en-US/docs/Web/API/Document/querySelector的第一段。
您可以使用querySelectorAll 和forEach（但forEach 仅适用于数组，因此您也需要使用Array.from。）所以，类似于：Array.from(document.querySelectorAll('.show')).forEach( element => { element.addEventListener('click', textToggle); });
顺便说一句，虽然添加多个监听器可能更容易，但添加一个 (document.addEventListener('click', textToggle)) 会快得多，使用 if 块来确保单击的元素是相关的，喜欢：function textToggle(event){ if(event.target.classList.contains('.somethingWorthClicking')){ do(stuff); } }
@Cat 是的，我用过类似的东西。谢谢

标签： javascript json ajax frontend

【解决方案1】：

以下是正确的结果吗？

编辑：添加切换逻辑

window.onload = function() {
  Array.from(document.getElementsByClassName('show')).forEach(element => element.addEventListener('click', textToggle));
};

function textToggle(ev) {
  const paragraphs = document.getElementsByClassName('result-box-description');
  const btns = document.getElementsByClassName('show');

  var btn = ev.target;
  var para = ev.target.previousSibling.previousElementSibling;
  if (para.classList.contains("truncate")) {
    for (var i = 0; i < paragraphs.length; i++) {
      paragraphs[i].classList.add('truncate');
      btns[i].innerHTML = 'show more';
    }
    btn.innerHTML = "show less";
    para.classList.remove("truncate");
  } else {
    btn.innerHTML = "show more";
    para.classList.add("truncate");
  }
}

p.result-box-description {
  @include tipography(14);
  color: #000;
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 1.2em;
  text-align: justify;
}

.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p class="result-box-description truncate">Lorem ipsum dolor sit amet, magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit...</p>
<span class="show">show more</span>
<p class="result-box-description truncate">Lorem ipsum dolor sit amet, magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit...</p>
<span class="show">show more</span>
<p class="result-box-description truncate">Lorem ipsum dolor sit amet, magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatelaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit...</p>
<span class="show">show more</span>

【讨论】：

@vogel22 请查看编辑后的代码，我添加了您可能需要的切换
非常感谢，这就是我要找的。最后我确实弄明白了，它和你在这里所做的非常相似:)

【解决方案2】：

您应该获取所有“显示”按钮并将事件附加到每个按钮。你可以这样做：

window.onload = function() {
  let shows = document.querySelectorAll('.show');
  shows.forEach((link) => { link.addEventListener('click', textToggle); });
};

function textToggle() {
  let paragraph = this.previousElementSibling;
  if (paragraph.classList.contains('truncate')) {
    paragraph.classList.remove('truncate');
    this.innerHTML = 'show less';
  } else {
    paragraph.classList.add('truncate');
    this.innerHTML = 'show more';
  }
}

我在 textToggle 中使用了 previousElementSibling 来指向你想要切换的段落。

这是一个代码笔：https://codepen.io/kinospro/pen/zVPZaJ

【讨论】：

感谢您的解决方案和您的时间，但是，它对我不起作用
我添加了一个带有工作示例的 codepen 链接。如果没有内容溢出，它可能看起来不起作用。
另外，由于 .truncate 类的编写方式，其他浏览器可能会出现问题，而不是基于 webkit 的。