基于ajax的动态隐藏/显示

如何解决基于ajax的动态隐藏/显示

| 我目前有一个动态的IP地址数组，想要显示（如果ip处于活动状态）和隐藏（如果ip处于非活动状态）。我已经实现了以下解决方案，但想知道是否有更好的方法。 数据文件是JSON格式，并且每秒更新一次，我正在使用jquery获取JSON文件的内容，并且基于要显示/隐藏ip地址和相应设备名称（存储在IP_Address数组中）的值

var IP_Address = new Array();
for (i=0;i<70;i++){ IP_Address[\"10.1.1.\"+i]=\"other-devices\";}
IP_Address[\"10.1.1.1\"]=\"known-device-1\";
IP_Address[\"10.1.1.16\"]=\"known-device-2\";
IP_Address[\"10.1.1.37\"]=\"known-device-3\";
IP_Address[\"10.1.1.38\"]=\"known-device-4\";
IP_Address[\"10.1.1.45\"]=\"known-device-5\";
IP_Address[\"10.1.1.46\"]=\"known-device-6\";
IP_Address[\"10.1.1.47\"]=\"known-device-7\";
IP_Address[\"10.1.1.49\"]=\"known-device-8\";
IP_Address[\"blank\"]=\"\";

JSON数据存储到数组（数据）中，并且可以按以下方式评估值

for(var i=0;i<count;i++){
    if(data[i].dl>0){
        $(\"#jq\"+i).html(IP_Address[data[i].ip]);}
    else if(data[i].dl ==0 ){
        $(\"#jq\"+i).html(IP_Address[\"blank\"]);}
}

在html部分...

<span id=\"jq1\"></span>
<span id=\"jq2\"></span>
<span id=\"jq3\"></span>
<span id=\"jq4\"></span>
<span id=\"jq5\"></span>
<span id=\"jq6\"></span>
<span id=\"jq7\"></span>
<span id=\"jq8\"></span>
<span id=\"jq9\"></span>
<span id=\"jq10\"></span>
<span id=\"jq11\"></span>
<span id=\"jq12\"></span>
<span id=\"jq13\"></span>
<span id=\"jq14\"></span>
<span id=\"jq15\"></span>
<span id=\"jq16\"></span>
<span id=\"jq17\"></span>
<span id=\"jq18\"></span>
<span id=\"jq19\"></span>
<span id=\"jq20\"></span>

    

解决方法

也许这应该对您有帮助

<script src=\"jquery.js\"></script>
<script>
$(function() { 
    setInterval(        
        function (){                

        var arr = new Array();

        for(var i=1;i<=5; i++){
           arr.push(Math.floor(Math.random()*20));
        }           

        $(\'.sh\').each(function (){
            if(arr.indexOf(Math.floor($(this).attr(\'id\').replace(\'jq\',\'\'))) > -1){
              $(this).show();
            }
            else{                         
              $(this).hide();
            }
        })
    },2000);
})

</script>
<span id=\"jq1\" class=\"sh\">1</span>
<span id=\"jq2\" class=\"sh\">2</span>
<span id=\"jq3\" class=\"sh\">3</span>
<span id=\"jq4\" class=\"sh\">4</span>
<span id=\"jq5\" class=\"sh\">5</span>
<span id=\"jq6\" class=\"sh\">6</span>
<span id=\"jq7\" class=\"sh\">7</span>
<span id=\"jq8\" class=\"sh\">8</span>
<span id=\"jq9\" class=\"sh\">9</span>
<span id=\"jq10\" class=\"sh\">10</span>
<span id=\"jq11\" class=\"sh\">11</span>
<span id=\"jq12\" class=\"sh\">12</span>
<span id=\"jq13\" class=\"sh\">13</span>
<span id=\"jq14\" class=\"sh\">14</span>
<span id=\"jq15\" class=\"sh\">15</span>
<span id=\"jq16\" class=\"sh\">16</span>
<span id=\"jq17\" class=\"sh\">17</span>
<span id=\"jq18\" class=\"sh\">18</span>
<span id=\"jq19\" class=\"sh\">19</span>
<span id=\"jq20\" class=\"sh\">20</span>

在JSFIDDLE上。 PS：如果有人知道如何检查数组中的值，请帮助我改善答案。