javascript - 让消息在几秒钟后消失

Question

我在屏幕上显示错误消息，我希望这些消息在 X 秒后消失。如果屏幕上显示一条消息，我正在使用一个简单的脚本。如果显示两条消息，请参见下面的示例，则只有第一条消息消失，第二条消息保留在屏幕上。如何删除这两条消息？

我正在使用这个脚本：

setTimeout(function() {
  $('#message').fadeOut('slow');
}, 15000);

产生消息的脚本。

{% if form.errors %}
  {% for field in form %}
    {% for error in field.errors %}
      <div id="message">
        <div class="alert alert-warning alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
            {{ error|escape }}
        </div>
      </div>
    {% endfor %}
  {% endfor %}
  {% for error in form.non_field_errors %}
    <div class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
        {{ error|escape }}
    </div>
  {% endfor %}
{% endif %}

谢谢你的帮助。

标签： javascripthtmldjango

Answer 1

尝试以下代码后，所有消息都从屏幕上消失了。

$(".alert").show(() => {
    setTimeout(() => {
        $(".alert").fadeTo(500, 1).slideUp(500, () => {

            $(message).hide();
        })
    }, 5000)
});

谢谢大家的时间！