Question

我正在尝试通过jQuery ...

配置来自$ .ajax（）的返回数据

我的例子是这样的：

首先，我使用的是codeigniter框架（仅供注意）

现在通过ajax我正在调用返回div组的函数

EXP：

function my_function() {
    for($i = 0; $i < 3; $i++) {
        print '<div class="block">'.$i.'</div>';
    }
}

现在通过js代码：

$.ajax({
    type: "POST",
    url: "path/to/my_function",

    success: function(data){
        $('#div#container').html(data);
    }
});

现在所有div（带有块类的3个div）都会一次出现。（我不喜欢这样）

我希望最后三个div中的每一个按顺序出现（例如使用slideDown）现在我的具体问题是：我如何配置ajax循环返回的数据，例如?????为每个div使用slideDown

Answer 1

最初添加display:none;

function my_function() {
    for($i = 0; $i < 3; $i++) {
        print '<div class="block" style="display:none;">'.$i.'</div>';
    }
}

然后

$.ajax({
    type: "POST",
    url: "path/to/my_function",

    success: function(data){
        $('div#container').html(data);
           $('div.block').each(function(){
             $(this).slideDown(1000);
         });
    }
});

Answer 2

如果希望一个div显示在另一个div之后，则在另一个div完成时为每个div触发向下滑动功能。您可以构建递归函数，以便动态设置索引以特定值开始和结束。当然，你的div id必须正确命名，所以你可以这样做。

function doSlideDown(startIndex, endIndex){
    $('div#container'+startIndex).slideDown(500, function(){
        if(startIndex < endIndex){
            doSlideDown(startIndex+1, endIndex);
        }
    });
}

$.ajax({
type: "POST",
url: "path/to/my_function",

success: function(data){
    $('div#container1').html(data);
    $('div#container2').html(data);
    $('div#container3').html(data);

    doSlideDown(1,3);
}
});

这将确保一次只滑出一个div。

我如何处理来自$ .ajax（）的返回数据？

2 个答案: