Мне нужно создать кнопку Load more, которая загружает 4 элемента, по которым она нажата.После загрузки всех элементов кнопка сброса показывает и сбрасывает страницу

Question

Идея состоит в том, что сначала отображаются только 4 элемента, что работает правильно.Когда вы нажимаете кнопку «Загрузить еще», он загружает еще 4 элемента, пока не достигнет конца.Когда больше нет контента для отображения, появляется кнопка «Сброс», и при нажатии на нее отображаются только первые 4 элемента.Все это работает нормально.Происходит следующее: после сброса и повторной загрузки всех элементов кнопка «Сброс» больше не отображается, и, естественно, я не могу сбросить страницу.Я должен обновить страницу для правильной работы.

$(document).ready(function () {

  $(".content").slice(0, 4).show();
  $("#loadMore").on("click", function (e) {
    e.preventDefault();
    $(".content:hidden").slice(0, 4).slideDown();
    if ($(".content:hidden").length == 0) {
      $("#resetBtn").show();
      $("#loadMore").addClass("hideLoadMore");
    }
    $("#resetBtn").on("click", function (e) {
      e.preventDefault();
      $(".content:visible").slice(4, 30).slideUp();
      $("#loadMore").addClass("showloadMore");
      $(this).addClass("hideResetButton");
      console.log(this);
    });
  })
});

.content {

  display: none;
}

.noContent {
  color: #000 !important;
  background-color: transparent !important;
  pointer-events: none;
}

.hideLoadMore {
  display: none !important;
}

.showloadMore {
  display: block!important;
  display: flex!important;
  justify-content: center!important;
}
.hideResetButton {
  display: none!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="content col-md-6">
          <div class="single-news mb-4">

            <!-- Grid row -->
            <div class="row">

              <!-- Grid column -->
              <div class="col-md-3">

                <!--Image-->
                <div class="view overlay rounded z-depth-1 mb-4">
                  <img class="img-fluid" src="images/GwenBelton.jpg"" alt=" Sample image">
                  <a>
                    <div class="mask rgba-white-slight waves-effect waves-light"></div>
                  </a>
                </div>

              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-md-9">

                <!-- Excerpt -->
                <p class="font-weight-bold dark-grey-text">Gwendolyn Belton</p>
                <div class="d-flex justify-content-between">
                  <div class="col-11 text-truncate pl-0 mb-3">
                    <a href="#!" class="dark-grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
                  </div>
                  <a><i class="fas fa-angle-double-right"></i></a>
                </div>

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row -->

          </div>
        </div>
        <div class="content col-md-6">
          <div class="single-news mb-4">

            <!-- Grid row -->
            <div class="row">

              <!-- Grid column -->
              <div class="col-md-3">

                <!--Image-->
                <div class="view overlay rounded z-depth-1 mb-4">
                  <img class="img-fluid" src="images/GwenBelton.jpg"" alt=" Sample image">
                  <a>
                    <div class="mask rgba-white-slight waves-effect waves-light"></div>
                  </a>
                </div>

              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-md-9">

                <!-- Excerpt -->
                <p class="font-weight-bold dark-grey-text">Gwendolyn Belton</p>
                <div class="d-flex justify-content-between">
                  <div class="col-11 text-truncate pl-0 mb-3">
                    <a href="#!" class="dark-grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
                  </div>
                  <a><i class="fas fa-angle-double-right"></i></a>
                </div>

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row -->

          </div>
        </div>
      </div>

<div id="loadMore" class=" d-flex justify-content-center"><button type="button" class="btn btn-primary">Load
      More</button></div>

  <div id="resetBtn" class=" d-flex justify-content-center" style="display: none!important;"><button type="button"
      class="btn btn-primary">Reset</button></div>

Answer 1

При дальнейшей проверке возникает несколько проблем:

1. Класс начальной загрузки d-flex эффективно применяет display: flex.
2. Прослушиватель событий для #resetBtn добавлен внутрьпрослушиватель событий для #loadMore, поэтому каждый раз при нажатии #loadMore добавляется новый прослушиватель событий *1011*.

Шаги к решению:

1 - Стописпользуя style="display: ... Вместо этого используйте классы начальной загрузки d-none и d-flex.

<div id="resetBtn" class=" d-flex justify-content-center" style="display: none!important;">

Становится

<div id="resetBtn" class="d-none justify-content-center">

2 - Переместите #resetBtn прослушиватель событий за пределы #loadMore слушатель событий.

$("#loadMore").on("click", function (e) {
  e.preventDefault();
  $(".content:hidden").slice(0, 4).slideDown();
  if ($(".content:hidden").length == 0) {
    $("#resetBtn").show();
    $("#loadMore").addClass("hideLoadMore");
  }
  $("#resetBtn").on("click", function (e) {
    e.preventDefault();
    $(".content:visible").slice(4, 30).slideUp();
    $("#loadMore").addClass("showloadMore");
    $(this).addClass("hideResetButton");
    console.log(this);
  });
})

Становится

$("#loadMore").on("click", function (e) {
  e.preventDefault();
  $(".content:hidden").slice(0, 4).slideDown();
  if ($(".content:hidden").length == 0) {
    $("#resetBtn").show();
    $("#loadMore").addClass("hideLoadMore");
  }
})
$("#resetBtn").on("click", function (e) {
  e.preventDefault();
  $(".content:visible").slice(4, 30).slideUp();
  $("#loadMore").addClass("showloadMore");
  $(this).addClass("hideResetButton");
  console.log(this);
});

3 - Используйте toggleClass для удаления d-flex и применения d-none и наоборот.

$("#resetBtn").show();
$("#loadMore").addClass("hideLoadMore");

становится

// shows reset button because it is hidden at this point
$("#resetBtn").toggleClass('d-none d-flex');
// hides load more button because it is shown at this point
$("#loadMore").toggleClass('d-none d-flex');

а

$("#loadMore").addClass("showloadMore");
$(this).addClass("hideResetButton");

становится

// shows load more button because it's hidden at this point
$("#loadMore").toggleClass('d-none d-flex');
// hides reset button because it is shown at this point
$(this).toggleClass('d-none d-flex');