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

Question

我正在为搜索引擎做前端，我有一个 div，它会根据搜索结果重复多次。所有这些都需要 chop 文本并显示更多/更少按钮。我正在使用切换类来 chop 文本。我写了下面的代码，但是，它只适用于第一个 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 以相同的方式工作，因为我不知道实际的数字是多少。

Answer 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>