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

これは少しハッキーですが、fadeOut と同じ長さの timeOut を設定できます。

$('#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;
    },

ジョン・スミスが言及したように、これはハッキーですが、そうである必要はありません。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 に答える