如何通过ajax在特定时间后加载然后替换该内容?

时间:2013-07-18 11:34:54

标签: javascript jquery html ajax setinterval

我遇到了ajax的问题​​:

场景是:onclick“triggre”,通过ajax将“noti.html”的第一个div中的内容加载到“#topNoti”中,之后在第二个div“noti.html”的特定时间之后更改/替换此加载的内容依此类推,直到最后一个div内容未加载。

noti.html:
  `  ....
     <div id="inq">
     <div id="div1">This is first div</div>
     <div id="div2">This is second div</div>
     <div id="div3">This is third div</div>
     <div id="div4">This is fourth div</div>
    ...
     <div id="div24">This is last div</div>

     </div>
    ...

#topNoti:
    <div id="topNoti"></div>

谢谢和问候

目前我用过:

$(".trigger").click(function(){
var index=1;
$m=$("#inq").find("div"+index);
setInterval(function(){
$("#topNoti").load("noti.html",$m);
index=index+1;
If(index==25){ index=1; }
},10000);
});

但是这段代码加载了所有div。谁能给我解决方案一个一个地加载“div”

我只是修改我的脚本n我可以做我想要的。 代码是:

 Var index=0;
 SetInterval(function(){
 $("#topNoti").load("noti.html #div"+index);
 index=index+1;
 If(index==25){index=0;}
 },2000);

那么,任何人都可以改进这段代码......

非常感谢

2 个答案:

答案 0 :(得分:1)

使用以下代码:

http://jsfiddle.net/GbQzh/

var index = 0;
var count=$("#topNoti div").length;
$("#topNoti div").hide().eq(index).show();
setInterval(function() {
     $("#topNoti div").hide().eq(index).show();
     index = index + 1;           
     if (index == count) {
         index = 0;
      }
}, 1000);

答案 1 :(得分:1)

这样的事情应该做到......

var index=0;

function Next() {
    //Hide old div (if any)
    if(index>0) {
        document.getElementById('part'+index).style.display='none';
    }
    index++;
    document.getElementById('part'+index).style.display='block';
    if(index<4) {
        setTimeout(Next, 1000);
    }
}

假设你的Divs对他们的ID有一个数字排序......

<div id="part0" style="display:none;">Hi</div>
<div id="part1" style="display:none;">Some</div>
<div id="part2" style="display:none;">Message</div>
<div id="part3" style="display:none;">Across</div>
<div id="part4" style="display:none;">Divs</div>