Question

我想要实现的是，使用PHP构建一系列表（表的数量是动态的），使用setInterval每5秒重新加载一次。然后可以单击其中一个表来显示或隐藏它。我已经完成了大部分工作，但我一直坚持维护表的状态，无论是可见还是隐藏。每次表重新加载表时状态都会重置为返回其原始状态（我认为新的引用正在传递，实际上我几乎可以确定这是什么情况）。我尝试将对div的引用复制到变量并将其与旧变量进行比较（我把那些代码解析出来，因为它不起作用）但我无法将旧设置放入新标记中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
        var divStateArray;
        function random_number() {
                var random = Math.floor(Math.random()*110000);
                return random;
        }
        //console.log(divStateArray);
        function reload(state){ 
                 $(".responsecontainer").load('counter.php?randval=' + random_number(), function() {
                                var $rowelements = $(".divRow");
                                var $divRow = $('.divTable').find($rowelements);        
                                        //console.log($divRow);
                                //by copying $divRow it copies a reference/pointer into divStateArray. 
                                //so any changes made to the properties of the div divRow are reflected in
                                //the afore mentioned variable. 
                                divStateArray = $divRow;

                                //merge the old settings in divoldstate with the new references in divStateArray
                                if (state == 'all') {
                                        divStateArray.hide();
                                }



                        }); 
        }
        //refresh the page every x miliseconds 
        var refreshId = setInterval(function() {
                                                        reload();                         
                                                }, 5000);


        $(document).ready(function() {
        //show the spinning logo until the tables are loaded. 
        $(".responsecontainer").html('<img src="/lbadmin/images/ajax-loader.gif" width=32 height=32 />');
        //display the page as soon as possible, then begin reloading every x seconds

        reload('all');
$(document).on('click',".headRow",function(){
                var $divRow = $(this).nextAll(".divRow")
                //console.log($divRow);
                if ($divRow.is(":hidden")) {
                       $divRow.show('fast');

                }                               
                else {
                       $divRow.hide('fast');
                }
        });

});


</script>
</head>
<body>
<p>hello</p>
<div class="responsecontainer" id="time1">
</div>
</br>
</body>
</html>

加载的表是（暂时和测试它只是一个静态表，但最终会改变为多个动态表 -

<?php
echo date("l, F d, Y h:i:s" ,time());
?>
<link rel="stylesheet" type="text/css" href="test.css" />

<p>hello</p>
</br>
<div class="divTable">
        <div class="headRow">
                <div class="divCell">LABEL: vippoo</div>
                <div  class="divCell">IP: 192.168.67.505</div>
                <div  class="divCell">Ports: 80-81</div>
                <div  class="divCell">Method: Layer 4</div>
                <div  class="divCell">Mode: DR</div>
                <div  class="divCell">Protocol: TCP</div>
                <div  class="divCell">Graph: link</div>
        </div>


 <div class="divRow">
                        <div class="divCell">label1</div>
                        <div class="divCell">192.168.66.666</div>
                        <div class="divCell">1</div>
                        <div class="divCell">Drain</div>
                        <div class="divCell">Halt</div>
                        <div class="divCell">uparrow</div>
                        <div class="divCell">graphlink</div>
                </div>
 <div class="divRow">
                        <div class="divCell">label1</div>
                        <div class="divCell">192.168.66.666</div>
                        <div class="divCell">1</div>
                        <div class="divCell">Drain</div>
                        <div class="divCell">Halt</div>
                        <div class="divCell">uparrow</div>
                        <div class="divCell">graphlink</div>
                </div>
 <div class="divRow">
                        <div class="divCell">label1</div>
                        <div class="divCell">192.168.66.666</div>
                        <div class="divCell">1</div>
                        <div class="divCell">Drain</div>
                        <div class="divCell">Halt</div>
                        <div class="divCell">uparrow</div>
                        <div class="divCell">graphlink</div>
                </div>

</div>
</br>

Answer 1

为什么不在表格周围放置<div>并显示/隐藏<div>？这样，如果您重新加载表，表的可见性将保持与表中div中定义的相同。

Answer 2

为什么不在尝试刷新/重新加载之前简单地检查表的状态？

如果表被隐藏，则不执行刷新，那么表的状态不会改变。

您的set-interval方法可以继续循环，这就是您添加支票的地方（内）。

所以你的reload会变成这样的

function isTableHidden() { 
    var $divRow = $('.divTable').nextAll(".divRow")
    return ($divRow.is(":hidden"))
}

function reload(state) { 

    if (isTableHidden())
        return; // exit early and don't reload anything

    $(".responsecontainer").load(
        ... rest of your oringal reload code ...
    );
}

使用setInterval在表重新加载后维护表的show hide状态

2 个答案: