Question

我希望在表单出现错误时添加<p>文本。我写了一些js代码，但它现在不起作用。我的问题是：如何添加文本，如果我有错误，显示1800毫秒，添加然后删除此文本？

$(document).ready(function () {
    ........................
        error: function () {
            $('form').append("<p class='er-msg'></p>").text('Maximum upload size 50MB. Please try again');
            $('.er-msg').animate({ opacity: 0} , 1800);
            $('.er-msg').remove();   //don't work 
        }
    };
   ....................
});

我希望有人帮助我。

Answer 1

现在您的动画需要1800毫秒，根据我的理解，您希望在隐藏消息之前延迟一段时间。所以你应该从这样的setTimeout开始

setTimeout(function () {
    $('.er-ms').animate({ opacity: 0} , 1800);
}, 1800);

jQuery animate接受第3个参数，这是一个在动画结束后调用的函数。然后你可以添加它，使消息消失。

setTimeout(function () {
    $('.er-ms').animate({ opacity: 0} , 1800, function () {
        $(this).hide().remove();
    });
}, 1800);

当你把它放在error回调中，在追加行之后，摆脱最后两行时，你应该好好去。

Answer 2

另一种方法是创建<p>并将其设置为display: none，然后您可以根据需要切换它。

HTML：

<p class='er-msg'>Maximum upload size 50MB. Please try again</p>

CSS：

.er-msg {
  display: none
}

jQuery的：

error: function () {
            $('.er-msg').fadeIn("slow");
            setTimeout(function(){
               $('.er-msg').fadeOut("slow");
            }, 1800);
        }

作为个人建议，我会将计时器稍高一些，以适应不能快速阅读的人。这样，您的错误消息对于碰巧看到它的任何人都有效。

JSFIDDLE DEMO

Answer 3

实际附加物是否正在发生？

我怀疑这不是因为你动态追加<p>。

为了成功绑定到此，您需要定位其包装器。

例如：

$('form').on(eventname, targetElement, function(){
 ....the behavior you want
});

您可以查看此博文以获取更多信息：http://blog.ning-xia.com/accessing-dynamically-created-elements-with-jquery/

Answer 4

<p>的附加内容无效，这就是您无法删除它的原因。试试这种方式：

   $(document).ready(function () {
        ........................
            error: function () {
                $('form').append("<p class='er-msg'></p>");
                $('.er-ms').text('Maximum upload size 50MB. Please try again');
                $('.er-ms').animate({ opacity: 0} , 1800);
                $('.er-ms').remove();   
            }
        };
       ....................
    });

Answer 5

简单解决方案

以下是如何执行此操作的示例：

var errorMessage = 'test message';
$('#question-header').append(
    $(
        '<p class="er-msg">' + 
             errorMessage  +
        '</p>'
    ).animate(
        {opacity: 0},
        1800,
        function(){
            $(this).remove();
        }
    )
);

您可以调用动画完成后运行的动画内部的函数。尝试在控制台中的此页面上运行此命令。请注意，使用此错误可以在不同的顺序中抛出，它们都将显示正确的行为。您可以通过简单的方式将动画和删除耦合到所有唯一的错误消息。

您的代码不起作用，因为应该在创建的元素上调用文本而不是您追加的元素。

正确的方法：

$('form').append($('<p class="er-msg"></p>').text('Maximum uplo...'));

但我认为上面的例子更具可读性，抽象性和更高性能。

添加然后删除<p>

5 个答案:

简单解决方案