Flask – 使用动态标签的切换按钮

在本文中，我们将介绍如何使用Flask实现一个带有动态标签的切换按钮。切换按钮是一种在网页中常用的交互元素，用户可以通过点击按钮来切换不同的状态或显示不同的内容。动态标签可以根据按钮的状态实时更新，并提供更好的用户体验。

阅读更多：Flask 教程

1. 使用Flask创建基本的网页

首先，我们需要使用Flask创建一个基本的网页。Flask是一个用Python编写的轻量级Web框架，非常适合快速开发小型应用程序。我们可以使用下面的代码创建一个简单的Flask应用：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

在上面的代码中，我们创建了一个名为app的Flask应用，并定义了一个路由/，它将渲染一个名为index.html的模板。我们使用render_template函数来加载HTML模板并渲染成最终的网页。if __name__ == '__main__'这一行代码确保只有在直接通过Python解释器运行脚本时才会启动Flask应用。

接下来，我们需要创建一个名为index.html的HTML模板，放在与app.py相同的目录下。在index.html中，我们可以编写网页的基本结构和样式，例如：

<!DOCTYPE html>
<html>
<head>
    <title>Toggle Button with Dynamic Label</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Toggle Button with Dynamic Label</h1>
    <button id="toggle-btn" class="off">OFF</button>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>

在上面的代码中，我们使用了一个<h1>标签作为网页的标题，并创建了一个按钮元素<button>作为切换按钮。按钮的初始状态为OFF，我们使用class属性将其设置为off，根据需要可以在style.css中为其添加样式。

2. 使用JavaScript实现切换按钮的动态标签

为了实现切换按钮的动态标签，我们需要使用JavaScript来处理按钮的点击事件并更新按钮的文本内容。我们可以创建一个名为script.js的JavaScript文件，并将其链接到HTML模板中。

document.addEventListener('DOMContentLoaded', function() {
    var button = document.querySelector('#toggle-btn');
    button.addEventListener('click', function() {
        if (this.classList.contains('off')) {
            this.classList.remove('off');
            this.classList.add('on');
            this.innerText = 'ON';
        } else {
            this.classList.remove('on');
            this.classList.add('off');
            this.innerText = 'OFF';
        }
    });
});

在上面的代码中，我们使用了querySelector方法来获取切换按钮的元素，并使用addEventListener方法为按钮添加了一个click事件监听器。当按钮被点击时，JavaScript会根据按钮的当前状态切换class属性和文本内容。如果按钮的class属性包含off，则将其切换为on，并将文本内容设置为’ON’；反之，将其切换回off，并将文本内容设置为’OFF’。