如何遍历和切换具有相同类/ VanillaJS的元素？

时间：2019-06-26 12:42:26

标签： javascript json ajax frontend

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

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

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

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来指向要切换的段落。

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

相关问题
最新问题