如果我使用 slideUp 删除一个 div，那么计数器就会迟到一个数字

Question

I'm learing HTML & JS.出于学习目的，我正在为我的公司编写一个新的票务系统。目前我遇到了一个不知道如何解决的问题。

因此，当我在没有 slideUp 动画的情况下运行脚本时，计数器计数正确，但当我插入动画时，计数器迟了一个数字。

例：

4 Notifications shown
Counter shows "4"

通过单击删除一个通知。

3 Notifications shown
Counter shows "4"

通过单击删除一个通知。

2 Notifications shown
Counter shows "3"

等等.....

通知删除器：

$(function(){
$(document).on('click', '.notification_closebtn_img', function(){
    //Del Notification
    $(this).parents(".notification").slideUp('slow', function(){
        $(this).remove();
    });
    //Placeholder
    if ( $("#notification_center").children().length === 0) 
    {
        $( "#notification_center" ).append('<div id="notification_empty"><div class="notification_empty_text"><strong>Keine Benachrichtigungen vorhanden</strong></div></div>');
    }
    set_ticket_counter();
   });
});

计数器：

function set_ticket_counter(){
    var notification_counter = $('.notification').length;
    $("#menu_num_text").text(notification_counter);
}

谁能帮我解决这个问题？

托马斯·哈斯

Answer 1

这部分代码：

//Placeholder
if ( $("#notification_center").children().length === 0) 
{
    $( "#notification_center" ).append('<div id="notification_empty"><div class="notification_empty_text"><strong>Keine Benachrichtigungen vorhanden</strong></div></div>');
}
set_ticket_counter();

将在动画完成之前执行。所以你的计数器会高一。

将上面的代码放在 slideUp 回调中，如下所示：

$(function(){
$(document).on('click', '.notification_closebtn_img', function(){
    //Del Notification
    $(this).parents(".notification").slideUp('slow', function(){
        $(this).remove();
        //Placeholder
        if ( $("#notification_center").children().length === 0) 
        {
            $( "#notification_center" ).append('<div id="notification_empty"><div class="notification_empty_text"><strong>Keine Benachrichtigungen vorhanden</strong></div></div>');
        }
        set_ticket_counter();
    });
   });
});

计数器将等于通知的数量。