简单的 Javascript 显示 div 功能不起作用答案

【问题标题】：Simple Javascript show div function isn't working简单的 Javascript 显示 div 功能不起作用
【发布时间】：2015-12-10 06:37:10
【问题描述】：

我有以下 Javascript 函数：

function checkConnection() {
    $.ajax({
        url: 'php_scripts/checkconnection.php',
        type: "POST",
        success: function() {
            document.getElementById('openOfflineDIV').style.display = 'none';
            console.log("connected");
        },
        error: function() {
            document.getElementById('openOfflineDIV').style.display = 'block';
            //I have also tried: 
            document.getElementById('openOfflineDIV').style.display = 'inline';
            console.log("disconnected");
        }
    }).complete(function() {
        setTimeout(checkConnection, 1000);
    });
}

此功能的目的是每秒检查一次互联网连接状态。如果连接处于活动状态，则 div openOfflineDIV 应该不可见，但如果连接丢失，则 div 应该可见。

此代码部分有效，这意味着如果我导航到我的网页地址，并在 url 末尾添加了“/#openOfflineDIV”，那么页面将加载屏幕上显示的 div，然后在一秒钟后消失一旦函数开始运行（这意味着函数一旦意识到连接处于活动状态，就会成功关闭 div）。

但该功能的第二部分不起作用，当互联网连接丢失时，它不会自动显示 div。我已经尝试过 inline 和 block 方法，但都没有工作。我很困惑，因为该函数肯定能够成功隐藏 div（我认为这意味着我定义 div 的语法是正确的）。

这是我的 html 中的模态代码：

<div id="openOfflineDIV" class="modalOfflineDIVDialog">
  <div id="mfs">
      <div id="wrapper">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                       <td align="center" valign="middle" class="alerttextbig">You have been disconnected from the internet!</td>
                  </tr>
               </table>
           </div>
      </div>
</div>

这是模态的 CSS：

.modalOfflineDIVDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 11;
    opacity:1;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalOfflineDIVDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalOfflineDIVDialog > div {
    width: 760px;
    height: 545px;
    position: relative;
    margin: 1% auto;
}

正如我所说的功能是一半工作，console.logs "connected" 和 "disconnected" 正确出现在控制台中，它能够成功关闭 div，但我不知道为什么它会赢'当网络连接中断时不自动显示 div。

任何关于为什么这不能完全发挥作用的想法将不胜感激。

【问题讨论】：

你是从cdn加载jquery吗？
JQuery Ajax - How to Detect Network Connection error when making Ajax call 的可能重复项
嗨@lal 我的页面头部包含https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js。这是不好的做法吗？
@Emily 离线时，如果你使用这个，你将无法加载 jquery.. 下载 jquery 后尝试这个并使用下载的 jquery 的路径来加载它。
@Emily：它工作得很好。请参阅：jsfiddle.net/abhitalks/46ujyu0y 通过断开连接并重新连接进行检查。

标签： javascript jquery html css ajax

【解决方案1】：

在您的 CSS 到隐藏块中添加了属性 opacity:0，因此如果您想在更改 display 属性时看到该分割，则需要将其更改为 1

【讨论】：

嗨@mysterx 感谢您的评论！我在我的问题中更新了 CSS 中的不透明度。该功能现已全面运行！但是有一个问题，div 现在在页面加载开始时出现可见，它在屏幕上停留大约 5 秒钟，直到其他所有内容都加载完毕，然后消失，无论如何要让它在后台加载，看不见，这样当所有页面元素都在加载过程中时用户看不到它？再次感谢！
你应该默认隐藏这个 div。为它设置 CSS display:none;
嗨@mysterx 感谢您的评论，事实证明问题确实是CSS！再次感谢！

【解决方案2】：

试试这个

$('#openOfflineDIV').hide(); 隐藏

还有这个

$('#openOfflineDIV').show(); 显示！

【讨论】：

嗨@sunil 感谢您的回复，我最初尝试了该方法，但没有成功，console.logs 写入正确，但 div show-hide 方法不起作用。跨度>

【解决方案3】：

你可以试试下面的代码来显示/隐藏而不是style.display：

$('#openOfflineDIV').show();
$('#openOfflineDIV').hide();

【讨论】：

嗨@rk3024 感谢您的回复，这是我最初尝试的方法，但对我不起作用，console.logs 正确写入，但 div show-hide 不起作用.
然后试试这个，显示 document.getElementById("remember").style.visibility = "visible";并隐藏 document.getElementById("remember").style.visibility = "hidden";