Удалите последний div вместо удаления всех из них, используя jQuery timeout

Question

Я использую AJAX для отправки формы без перезагрузки. Я использую это для своей регистрационной формы. После того, как я ловлю свое сообщение об ошибке / успехе, я добавляю его в свой div и удаляю через 5 секунд, используя функцию тайм-аута.

Теперь, если пользователь нажимает кнопку и получает ошибку, а затем снова нажимает кнопку (до того, как Прошло 5 секунд) второе сообщение об ошибке div будет отображаться с той же ошибкой, но оно будет удалено одновременно с первым. Так что я пытаюсь добиться, чтобы мои сообщения об ошибках / успехах имели индивидуальные тайм-ауты. Итак, появляется первая ошибка, затем через 2 секунды я снова нажимаю кнопку и получаю вторую ошибку, теперь первая ошибка будет удалена через 5 секунд, а вторая останется до тех пор, пока не пройдет 5 секунд.

Итак, в моем коде HTML есть div с идентификатором msg-response, где появляются сообщения об ошибках / успехах. И вот как я их называю:

$("#registerform").submit(function(event) {
    var ajaxRequest;
    event.preventDefault();
    $("#result").html('');
    var values = $(this).serialize();
       ajaxRequest = $.ajax({
            url: "include/auth/register.php",
            type: "post",
            data: values
        });
    ajaxRequest.done(function (response){
         if ($.trim(response) == 'error') {
            $("#msg-response").prepend("<div class='error-msg'>Email format isn't valid. Try again.</div>").hide().fadeIn("slow");
            setTimeout(function() {
                $('.error-msg').fadeOutAndRemove('slow');
            }, 5000);
         }
    });

    ajaxRequest.fail(function (){
        alert("error");
    });

});

Так как я могу добавить отдельные таймауты для каждого появившегося div? И не один тайм-аут для всех дивов с классом .error-msg.

Заранее спасибо.

Answer 1

Вы можете сохранить .error-msg внутри var и затем удалить его с помощью var ссылки:

var error = $("<div class='error-msg'>Email format isn't valid. Try again.</div>"); 
error.fadeOutAndRemove('slow');

Окончательный код:

     if ($.trim(response) == 'error') {
        var error = $("<div class='error-msg'>Email format isn't valid. Try again.</div>");

        $("#msg-response").prepend(error).hide().fadeIn("slow");
        setTimeout(function() {
            error.fadeOutAndRemove('slow');
        }, 5000);
     }

Answer 2

Интересно, я заработал, сделав свой error-msg div идентификатором вместо CLASS, вот так:

$("#registerform").submit(function(event) {
    var ajaxRequest;
    event.preventDefault();
    $("#result").html('');
    var values = $(this).serialize();
       ajaxRequest = $.ajax({
            url: "include/auth/register.php",
            type: "post",
            data: values
        });
    ajaxRequest.done(function (response){
         if ($.trim(response) == 'error') {
            $("#msg-response").prepend("<div id='error-msg'>Email format isn't valid. Try again.</div>").hide().fadeIn("slow"); // Changed line
            setTimeout(function() {
                $('#error-msg').fadeOutAndRemove('slow'); // Changed line
            }, 5000);
         }
    });

    ajaxRequest.fail(function (){
        alert("error");
    });

});

Я немного запутался, так что, по крайней мере, кто-то может написать мне объяснение, почему это хорошо сейчас, когда я использую ID, а не при использовании классов? И это правильный подход?