基于ajax的动态隐藏/显示

时间:2011-04-18 04:06:21

标签: jquery

我目前有一个动态的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>

1 个答案:

答案 0 :(得分: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 ::如果有人知道如何检查数组中的值,那么请帮助我改进我的答案。