Question

这是我想要实现的目标：

点击一个按钮，滑动一个div，在它之后 - 清理内容，在该div中创建行并用数据填充行，完成所有操作后 - 滑动div。我写了这段代码（在页面加载时调用它，当点击其中一个按钮时：

function create_rows()
{
$(".div_rows_container").slideUp(400, function(){
    $(".div_rows_container").html("");
    for(var i=0; i<arr_pros.length; i++)
    {
        if(arr_pros[i].pro_area==curr_area)
        {
            $("<div id='row_id_"+arr_pros[i].pro_id+"' class='div_row'></div>")
                .appendTo(".div_rows_container");
            populate_row(arr_pros[i], i)
        }
    }
    $(".div_rows_container").slideDown(400);
});
}

function populate_row(pro, i)
{
    var row_id = "#row_id_"+pro.pro_id;
    $("<div class='div_pro_name'></div>").html(pro.pro_name).appendTo(row_id);
    $("<div class='div_pro_address'></div>").html(pro.pro_address + ", " + pro.pro_city).appendTo(row_id);
    $("<div class='div_pro_phone'></div>").html(pro.pro_phone).appendTo(row_id);
}

它会向上滑动，清除内容，创建行并填充它们，但它不会向下滑动。它只是一次显示所有行。那我怎么能让它也滑下来？

Answer 1

您可以尝试以下代码：

var deferred = $.Deferred();

    function create_rows()
    {
    $(".div_rows_container").slideUp(400, function(){
        $(".div_rows_container").html("");
        for(var i=0; i<arr_pros.length; i++)
        {
            if(arr_pros[i].pro_area==curr_area)
            {
                $("<div id='row_id_"+arr_pros[i].pro_id+"' class='div_row'></div>")
                    .appendTo(".div_rows_container");
                populate_row(arr_pros[i], i)
            }
        }
    });
        deferred.resolve();
    }

    deferred.done(function() {
        $(".div_rows_container").slideDown(400);
    });

    function populate_row(pro, i)
    {
        var row_id = "#row_id_"+pro.pro_id;
        $("<div class='div_pro_name'></div>").html(pro.pro_name).appendTo(row_id);
        $("<div class='div_pro_address'></div>").html(pro.pro_address + ", " + pro.pro_city).appendTo(row_id);
        $("<div class='div_pro_phone'></div>").html(pro.pro_phone).appendTo(row_id);
    }

请在此处查看参考资料：How to fire a callback function after a for-loop is done in Jquery?

关于延迟对象：

http://api.jquery.com/category/deferred-object/

如果有效，请告诉我，因为我也想知道，祝你好运。

slideUp（）之后的slideDown（）

1 个答案: