0

当我删除评论时，rowCount 不会更新为不包含实际评论数。因为我使用淡出功能而不是 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);
        }
    });
});
4

2 回答 2

1

这有点 hacky，但你可以设置一个 timeOut 的持续时间，只要你的 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/

于 2013-04-28T12:01:35.110 回答
0

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

你的“成功”处理程序

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

正如 john smith 所提到的，这是hackey，但并非必须如此。fade()实际的问题是您忽略了不会停止执行代码的事实。时刻fade(500)完成后，fade(500)调用之后的代码已经运行并返回了行数，这显然是您不期望的，因为 fade 仍在运行。这个问题的正确解决方案是包装所有依赖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;
},
于 2013-04-28T13:15:07.607 回答