Question

我有一个context.Set<MyModelClassName>().FromSqlRaw("MyStoredProcedureName").ToList();语句，它将根据返回的switch显示一个div。

正在发生的事情：

用户转到URL
首先加载默认内容（不受number语句影响的内容）。
几秒钟的延迟后，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;
}

Answer 1

尝试这个：

<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>

要查看新版本中不推荐使用的方法，请检查this link

页面加载后几秒钟内容出现

1 个答案: