Я делаю интерфейс для поисковой системы, и у меня есть div, который будет повторяться много раз в зависимости от результатов поиска. Все они должны иметь усеченный текст и показывать больше / меньше кнопок. Я использую класс переключения для усечения текста. Я написал код ниже, однако, он работает только для первого div, и я не знаю, как заставить его работать для всех них. Может кто-нибудь, пожалуйста, помогите / объясните мне?

Я пытался использовать цикл for , но я думаю, что я делаю что-то не так

HTML

 {amp}lt;p class="result-box-description truncate"{amp}gt;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...{amp}lt;/p{amp}gt; {amp}lt;span class="show"{amp}gt;show more{amp}lt;/span{amp}gt; {amp}lt;p class="result-box-description truncate"{amp}gt;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...{amp}lt;/p{amp}gt; {amp}lt;span class="show"{amp}gt;show more{amp}lt;/span{amp}gt; {amp}lt;p class="result-box-description truncate"{amp}gt;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...{amp}lt;/p{amp}gt; {amp}lt;span class="show"{amp}gt;show more{amp}lt;/span{amp}gt; 

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 {amp}lt; paragraphs.length; i  ) { paragraphs[i].classList.toggle('truncate'); } if (paragraphs.classList.contains('truncate')) { btn.innerHTML = 'show more'; } else { btn.innerHTML = 'show less'; } } 

Я просто хочу, чтобы все div работали одинаково, так как я не знаю, какое будет действительное число.

Является ли следующий результат правильным?

edit: добавлена ​​логика переключения

 window.onload = function() { Array.from(document.getElementsByClassName('show')).forEach(element ={amp}gt; 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 {amp}lt; 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; } 
 {amp}lt;p class="result-box-description truncate"{amp}gt;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...{amp}lt;/p{amp}gt; {amp}lt;span class="show"{amp}gt;show more{amp}lt;/span{amp}gt; {amp}lt;p class="result-box-description truncate"{amp}gt;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...{amp}lt;/p{amp}gt; {amp}lt;span class="show"{amp}gt;show more{amp}lt;/span{amp}gt; {amp}lt;p class="result-box-description truncate"{amp}gt;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...{amp}lt;/p{amp}gt; {amp}lt;span class="show"{amp}gt;show more{amp}lt;/span{amp}gt; 

Вы должны получить все кнопки «показать» и прикрепить событие к каждой из них. Вы можете сделать это так:

 window.onload = function() { let shows = document.querySelectorAll('.show'); shows.forEach((link) ={amp}gt; { 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'; } } 

Я использовал previousElementSibling внутри textToggle, чтобы указать на абзац, который вы хотите переключить.

Вот кодовая ручка: https://codepen.io/kinospro/pen/zVPZaJ