关于jquery：简单的Javascript show div函数不起作用


Simple Javascript show div function isn't working

我有以下Javascript函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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应该是可见的。

此代码部分正常工作，这意味着如果我导航到我的网页地址并将"/＃openOfflineDIV"添加到网址的末尾，那么页面将加载显示在屏幕上的div，然后在第二次执行该功能后消失开始运行(这意味着该函数在实现连接激活后成功关闭div)。

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

这是我的html模式的代码：

1
2
3
4
5
          <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>

这是模态的CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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。

任何有关为什么不能完全发挥作用的想法都会非常感激。

相关讨论

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

相关讨论

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

1
2
$('#openOfflineDIV').show();
$('#openOfflineDIV').hide();
相关讨论

试试这个

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

还有这个

$('#openOfflineDIV').show();来表示！

相关讨论