Используя Jquery, чтобы показать больше данных

Question

Следующее Jquery позволяет разрешить нажатие кнопки «Загрузить еще», чтобы показать больше комментариев к сообщению. Работает нормально только на 1 пост и это комментарии. Если я захочу l oop просмотреть группу постов и их комментариев, а затем применить этот код к комментариям, чтобы загружать больше комментариев при нажатии кнопки, это не будет работать должным образом, поскольку один и тот же класс / идентификатор зацикливается для всех сообщений. , Как это можно сделать?

  $('.post').slice(0,5).show();

$('#btnMore').on('click', function() {
  $('.post:hidden').slice(0,3).slideDown();
  if($('.post:hidden').length === 0) {
    $('#btnMore').fadeOut();
  }
});

HTML Добавлено:

@foreach($topans as $topanswer)

                   {{$topanswer->body}} 

          <div class="content">
                  @foreach($topanswer->comments as $topanscom)
                      <div class="post">
                     <p>{{$topanscom->comment}} </p>

                      </div>
                  @endforeach

                  <div class="btnHolder">
                     <button id="btnMore">Load More</button>
                  </div>

          </div>
@endforeach

CSS:

.post {
  display: none;
}

Answer 1

Независимо от того, как вы генерируете этот html, вам нужно создать держатель для итерации, чтобы различать различные наборы. Вы также захотите использовать класс вместо идентификатора для своей кнопки.

Обратите внимание на введение контейнера "postSet" для элементов div и использование this внутри итераций, чтобы сохранить текущие цели ограничены. Хотя вы будете использовать разные имена и стили, показанная здесь структура должна быть легко адаптирована к вашей текущей реализации.

// Iterate the containers for the initial showing
$('.postSet').each(function(){
 // Use `this` in order to reference the current post set container
 $('.post',this).slice(0,5).show();
});

$('.btnMore').on('click', function() {
  // Locate the current container for the post set
  var container = $(this).closest('.postSet');

  // Use the post set container as a reference for scope
  $('.post:hidden',container).slice(0,3).slideDown();
  if($('.post:hidden',container).length === 0) {
    $(this).fadeOut();
  }
});

.postSet{
 padding: 1% 3%;
 border: 1px solid black;
}
.post{
 display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="postSet">
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <p><button class="btnMore" type="button">More</button></p>
</div>
<div class="postSet">
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <p><button class="btnMore" type="button">More</button></p>
</div>
<div class="postSet">
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <div class="post">Lorem ipsum</div>
  <p><button class="btnMore" type="button">More</button></p>
</div>