<script> 在烧瓶 html 页面中的位置

Question

我希望使用此代码（从此处）淡出我的 Flash 消息：

<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&nbsp;src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>