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

【问题标题】：<script> placement in flask html pages<script> 在烧瓶 html 页面中的位置
【发布时间】：2020-04-07 22:54:07
【问题描述】：

我希望使用此代码 (from here) 让我的 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 的帮助

【问题讨论】：

您应该用 {% raw %} 和 {% endraw %} 标签包围 Javascript 代码，以便正确地转义 Javascript 代码。 jinja.palletsprojects.com/en/2.11.x/templates/#escaping
谢谢，我添加了，但没有任何改变。
我怀疑您使用的是 JQuery，但也许您忘记将它包含在脚本中？您是否也在模板中的某处包含了 JQuery 脚本？如果没有，也许你应该这样做。
您需要包含 JQuery。因为您链接到的答案使用 JQuery。您可以通过在您的脚本标签<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script> 之前粘贴它来包含它
工作中，感谢您的帮助。代码已更新。

标签： javascript python jquery html flask

【解决方案1】：

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

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

【讨论】：