javascript - <script> 在 Flask html 页面中的放置

Question

我想使用此代码让我的 Flash 消息淡出( from here ):

<script type="text/javascript">setTimeout(function() {$('#stepMessage').fadeOut('slow');}, 3000); </script>

我的完整脚本如下所示:

解决方案:

在base.html中: {% 扩展 'bootstrap/base.html' %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script> <-- included JQuery
{% raw %}
<script type="text/javascript">window.setTimeout(function() {$('#stepMessage').fadeOut('slow');}, 3000); </script> <-- added function
{% endraw %}
{% endblock %}

{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}

在index.html中，我现在可以使用之前定义的函数:

{% block content %}
    <div class="container">
     .
     .
     .
    </div>


    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for message in messages %}
            {% set lvl = "alert-danger" if message[1]["result"] == False else "alert-info" %}
        <div id="stepMessage" class="alert {{ lvl }}" role="alert">{{  message[1]["content"] }}</div>
        {% endfor %}
    {% endif %}
    {% endwith %}

    {% block app_content %}
    {% endblock %}

{% endblock %}

感谢@Rishi Dev 的帮助

Answer 1

您需要包含 JQuery。 将此标记粘贴到模板中的脚本标记之前

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>