Заставить сообщение исчезнуть через несколько секунд

#javascript #html #django

#javascript #HTML #django

Вопрос:

Я отображаю сообщения об ошибках на экране, и я хочу, чтобы эти сообщения исчезли через 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">amp;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">amp;times;</span></button>
        {{ error|escape }}
    </div>
  {% endfor %}
{% endif %}

Спасибо за помощь.

1. используйте class ( .message )вместо id. Затем $('.message') должен быть возвращен массив, поэтому вызывайте fadeOut для каждого элемента массива.

2. можем ли мы увидеть скрипт, который отображает сообщения?

3. @MrPizzaGuy я включил скрипт, который отображает сообщения.

4. @Pac0 не могли бы вы показать мне пример?

5. @paniklas Кевин Джонсон сначала нажал на курок, см. Их ответ

Ответ №1:

если это не сработает, просто попробуйте:

 setTimeout(function(){
  $('.message').hide();
},1000);

1. подождите, что вы изменили, javascript или HTML? попробуйте оба, сделайте их селектором класса и повторите попытку, была только 1 ошибка, и я ее исправил, если есть еще, сообщите мне строку ошибки, и я исправлю это, спасибо, что попробовали мой код

2. Я изменил оба на class, и это не работает. Я просто попробовал еще раз.

3. Я использовал id вместо class с помощью hide, и первое сообщение исчезает, однако второе остается. Спасибо за помощь.

4. затем попробуйте предотвратить появление второго или использовать плагин notply, github.com/kevinj045/notply

5. вы использовали notply?

Ответ №2:

После попытки следующего кода все сообщения исчезли с экрана.

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

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

Спасибо всем за ваше время!