Question

我的页面上有一个脚本，如果已连接到互联网（我的意思是，单击按钮时加载文本，或者需要显示则少显示），该脚本应该起作用；如果没有连接，则隐藏按钮。

我提到我使用的是jquery-3.3.1.slim.min.js（脚本src链接网站）库。

我直接在HTML头上使用标签。

当为connection（=='true'）时，会有一部分加载更多的段落/不显示p。什么时候不上网，我应该隐藏那些div并显示所有文本。

/*JQUERY CODE*/

var connection = "";

connection += navigator.onLine;

if (connection == 'true') {

  $(document).ready(function() {
    size_p = $("#myList p").length;
    x = 0;
    $('#myList p:lt(' + x + ')').show();

    $('#loadMore').click(function() {
      x = (x + 4 <= size_p) ? x + 4 : size_p;
      $('#myList p:lt(' + x + ')').show();
    });

    $('#showLess').click(function() {
      x = (x - 4 < 0) ? 4 : x - 4;
      $('#myList p').not(':lt(' + x + ')').hide();

    });

  });

} else
if (connection == 'false') {


  $("#loadMore").css("display", "none");

  $("#showLess").css("display", "none");

  $("#myList").css("display", "inline");

}

/*CSS CODE*/

#myList p {
  display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
  padding: 5px 5px 5px 10px;
  cursor: pointer;
  background: #e8e8e8;
  font-size: 14px;
  width: 115px;
  margin: 5px;
  position: relative;
  border-radius: 15px;
}

#loadMore:hover #showLessa:hover #showLess:hover {
  color: black;
}

#showLess {
  color: red;
  cursor: pointer;
  padding: 5px 5px 5px 10px;
  cursor: pointer;
  background: #e8e8e8;
  font-size: 14px;
  width: 115px;
  margin: 5px;
  position: relative;
  border-radius: 15px;
}

#load_no_internet {
  display: none;
  color: green;
  cursor: pointer;
  padding: 5px 5px 5px 10px;
  cursor: pointer;
  background: #e8e8e8;
  font-size: 14px;
  width: 115px;
  margin: 5px;
  position: relative;
  border-radius: 15px;
}

#load_no_internet:hover #show_no_interneta:hover #show_no_internet:hover {
  color: black;
}

#show_no_internet {
  display: none;
  color: red;
  cursor: pointer;
  padding: 5px 5px 5px 10px;
  cursor: pointer;
  background: #e8e8e8;
  font-size: 14px;
  width: 115px;
  margin: 5px;
  position: relative;
  border-radius: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<div id="myList">
  <p> SOME TEXT HERE </p>
  <p> SOME TEXT HERE </p>
  <p> SOME TEXT HERE </p>
  <p> SOME TEXT HERE </p>
</div>
<div id="loadMore">See more text...</div>
<div id="showLess">See less text...</div>

我的问题是，当我没有互联网时..没有任何作用。

如果没有互联网连接，我想给我一些建议，以使其正常运行。

Answer 1

将您的问题按字面意思是“当我没有互联网...时”

您正在通过CDN请求jQuery；如果您实际上没有互联网连接，那么您将无法访问jQuery。

您需要下载jQuery，以便拥有本地副本。从jQuery网站下载它，然后将其保存到您的项目中。然后更改脚本标签以在本地请求它，如下所示：

<script src="/jquery.min.js"></script>

通常，最佳做法是将与JS相关的文件保存在子目录中，例如/js。因此，您的脚本标签应如下所示：

<script src="/js/jquery.min.js"></script>

Answer 2

您正在从外部服务器加载以下脚本

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

当您没有互联网时，此功能不可用。最好的办法是下载脚本，并将其放在与index.html相同的文件夹中，并包含以下内容：

<script src="/jquery.min.js"></script>

ElseIf语句对于脚本不可见

2 个答案: