Question

当我删除评论时，rowCount不会更新为不包含实际的评论数。因为我使用fadeout函数而不是remove（）函数，因为我希望它从视图中淡出。

我怎么能先淡出然后删除？

尝试了这个，但没有帮助：

$('#item_'+DbNumberID).fadeOut("slow", function() {
    $(this).remove();
});

守则：

jQuery.ajax({
    type: "POST",
    url: "delete-comment.php", 
    dataType:"text", 
    data:myData, 
    success: function(response){
        $('#item_'+DbNumberID).fadeOut("slow");
        var rowCount = $('#comment li').length;
        alert(rowCount);
        return false;   
    },
    error: function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }
});

编辑：

这是我的完整代码。这可以简单吗？

    //##### Send delete Ajax request to response.php #########
$("body").on("click", "#comment .del_button", function(e) {
    e.preventDefault();

    //e.returnValue = false;
    var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
    var DbNumberID = clickedID[1]; //and get number from array
    var myData = 'action=delete&id='+ DbNumberID; //build a post data structure

    jQuery.ajax({
        type: "POST", // HTTP method POST or GET
        url: "add-comment.php", //Where to make Ajax calls
        dataType: "text", // Data type, HTML, json etc.
        data: myData, //Form variables
        success: function(response){
            //on success, hide  element user wants to delete.
            $('#item_'+DbNumberID).fadeOut(500, function() {
                setTimeout(function() {
                    $('#item_'+DbNumberID).remove();
                }, 500);
            });

            var rowCount = $('#comment li').length;
            rowCount--;
            alert(rowCount);

            if (rowCount == 0) {    
                $("#comment").html('<div class="PageWarning">No comments.</div></div>');    
            }
            return false;
        },

        error:function (xhr, ajaxOptions, thrownError){
            //On error, we alert user
            alert(thrownError);
        }
    });
});

Answer 1

这有点hacky但你可以设置一个持续时间与你的fadeOut

一样长的时间

$('#item_'+DbNumberID).fadeOut(500, function() {
setTimeout(function() {
  $('#item_'+DbNumberID).remove();
}, 500);
});

您也可以尝试

$('#item_'+DbNumberID).fadeOut('slow').queue(function(next) {
$(this).remove();
next();
});

http://cdmckay.org/blog/2010/06/22/how-to-use-custom-jquery-animation-queues/

Answer 2

答案已被选中，但无论如何我都会回答这个页面更有用:)

你的成功＆＃34;处理

    success: function(response){
        //on success, hide  element user wants to delete.
        $('#item_'+DbNumberID).fadeOut(500, function() {
            setTimeout(function() {
                $('#item_'+DbNumberID).remove();
            }, 500);
        });

        var rowCount = $('#comment li').length;
        rowCount--;
        alert(rowCount);

        if (rowCount == 0) {    
            $("#comment").html('<div class="PageWarning">No comments.</div></div>');    
        }
        return false;
    },

这是 hackey ，正如约翰史密斯所说，但它并非必须如此。实际的问题是你忽略了fade()没有停止执行代码的事实。在fade(500)完成的那一刻，fade(500)调用之后的代码已经运行并且已经返回了行数，这显然是您不期望的，因为淡入淡出仍然在运行。解决此问题的正确方法是将所有依赖于{em>淡化完整回调中fade()结果的代码包装如下

success: function(response){

    var rowCount = $('#comment li').length;

    //on success, hide  element user wants to delete.
    $('#item_'+DbNumberID).fadeOut(500, function() {

        $('#item_'+DbNumberID).remove();

        /* the code that has been moved into this callback */
        rowCount = $('#comment li').length;

        alert(rowCount);

        if (rowCount == 0) {    
            $("#comment").html('<div class="PageWarning">No comments.</div></div>');    
        }
    });
    return false;
},

删除，淡出和删除评论

守则：

编辑：

2 个答案:

你的成功＆＃34;处理