Контент появляется через несколько секунд после загрузки страницы - PullRequest
Новая
       1

Контент появляется через несколько секунд после загрузки страницы

0 голосов
/ 26 февраля 2020

У меня есть оператор switch, который будет показывать div в зависимости от того, что возвращается number.

Что происходит:

  • Пользователь переходит на URL
  • Сначала загружается содержимое по умолчанию (содержимое, на которое не влияет оператор switch).
  • Через несколько секунд div, отображаемое оператором switch, будет просто выполните рендеринг.

Я пытаюсь достичь способа загрузки соответствующего div из оператора switch вместе с содержимым по умолчанию (.default).

Текущий подход: 

var number = 50;

switch (true){
  case(number >= 25):
    $('.contentOne').removeClass('dontShow').addClass('show');
    break;

  case (number <= 24):
    $('.contentTwo').removeClass('dontShow').addClass('show');
    break;

}
.dontShow{
  display:none;
}

.show{
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hero">

  <div class="default">
  This content will load in by default
  </div>
  
  <div class="contentOne dontShow">
      <h1>This is text for content 1</h1>
  </div>

  <div class="contentTwo dontShow">
      <h1>This is text for content 2</h1>
  </div>


</div>

1 Ответ

0 голосов
/ 26 февраля 2020

Попробуйте это: 

<html>
  <head>
    <style>
      .dontShow {
        display:none;
      }

      .show {
        display: block;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      var number = 50;

      switch (true) {
        case(number >= 25):
          $('.contentOne').removeClass('dontShow').addClass('show');
          break;

        case (number <= 24):
          $('.contentTwo').removeClass('dontShow').addClass('show');
          break;

      }
      
      $(document).ready(function() {
      	// When document has been loaded, the page shows its content 
        $("body").removeClass('dontShow');
      });
    </script>
  </head>
  <body class="dontShow">

    <div class="hero">
      <div class="default">
      	This content will load in by default
      </div>
      <div class="contentOne dontShow">
          <h1>This is text for content 1</h1>
      </div>
      <div class="contentTwo dontShow">
          <h1>This is text for content 2</h1>
      </div>
    </div>

  </body>
</html>

Обратите внимание, что вы используете устаревшую версию JQuery, поэтому я вставил в код самую новую версию:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Чтобы увидеть устаревшие методы в новом выпуске, проверьте эту ссылку

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...