2011-04-18 110 views
0

我目前有一个动态数组的IP地址,并希望显示(如果IP是活动的)和隐藏(如果IP是无效的)。我已经实施了下面的解决方案,但想知道是否有更好的方法..动态隐藏/显示基于ajax

数据文件是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> 
+2

这是一个非常模糊的问题(好吧,甚至没有真正的问题),如果没有进一步的细节,提供任何见解都将非常困难。 – 2011-04-18 04:17:28

+0

为什么每个可能的设备都有一个容器?为什么不根据需要创建(并删除)这些跨度? – 2011-04-18 04:29:22

+0

@Kevin P关于如何创建动态容器的例子? – Linus 2011-04-18 05:03:15

回答

0

也许这会帮助你

<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 ::如果有人知道如何检查数组中的值然后请帮助我改进我的答案。

+1

'[1,2,3,4] .indexOf(4)> -1' - 使用a检查数组中的值简单的indexOf。 – Zirak 2011-04-18 05:29:05

+0

@Zirak谢谢!!! – 2011-04-18 05:29:57