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

Question

我对 ajax 有疑问：

场景是：点击“triggre”，通过ajax从“noti.html”的第一个div加载内容到“#topNoti”，然后在特定时间后用“noti.html”的第二个div更改/替换这个加载的内容等等直到最后一个 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);

那么，任何人都可以改进此代码...

谢谢n问候

Answer 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);

Answer 2

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

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);
    }
}

假设您的 Div 对其 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>