Python 点击按钮切换图片

在 Web 开发中，经常会遇到需要在用户点击按钮时切换显示的图片的需求。而使用 Python 和一些 Web 开发框架可以很容易地实现这一功能。本文将介绍如何使用 Python 和 Flask 框架来实现按钮点击切换图片的功能。

Flask 框架简介

Flask 是一个使用 Python 编写的微型 Web 开发框架。它简单轻巧，易于上手，并且具有很高的灵活性。Flask 框架可以用于构建各种规模的 Web 应用程序，从简单的静态网页到复杂的动态应用都可以实现。

准备工作

在开始之前，我们需要安装 Python 和 Flask 框架。你可以在 Python 官网（ Python，并按照安装向导进行安装。安装完成后，可以使用以下命令来确认 Python 是否成功安装：

python --version

接下来，我们使用 pip 包管理器来安装 Flask。在命令行中执行以下命令：

pip install flask

安装完成后，我们就可以开始编写代码了。

创建 Flask 应用

首先，我们需要导入 Flask 模块，并创建一个 Flask 应用对象：

from flask import Flask, render_template
app = Flask(__name__)

接下来，我们需要创建一个路由来处理用户的请求，并返回一个渲染后的 HTML 页面。在这个页面中，我们将显示一个按钮和一个图片。当用户点击按钮时，图片将切换为另一张。

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

在这个路由函数中，我们使用 render_template 函数来渲染名为 index.html 的模板文件。在模板文件中，我们将定义按钮和图片的 HTML 代码，并通过特定的标记来绑定按钮的点击事件。

编写 HTML 模板

在项目目录中创建一个名为 templates 的文件夹，并在其中创建一个名为 index.html 的文件。在这个文件中，我们将编写 HTML 代码来显示按钮和图片，并通过 JavaScript 来实现按钮点击事件。

<!DOCTYPE html>
<html>
<head>
    <title>点击按钮切换图片示例</title>
    <script src="
    <script>
        $(document).ready(function() {
            var image = $('#image');
            var button = $('#button');
            
            button.click(function() {
                if (button.text() == '显示图片1') {
                    button.text('显示图片2');
                    image.attr('src', '/static/image2.jpg');
                } else {
                    button.text('显示图片1');
                    image.attr('src', '/static/image1.jpg');
                }
            });
        });
    </script>
</head>
<body>
    点击按钮切换图片示例
    <button id="button">显示图片1</button>
    <br><br>
    <img id="image" src="/static/image1.jpg" width="200">
</body>
</html>

在这个模板文件中，我们首先引入了 jQuery 库，以便在 JavaScript 中使用。然后，我们通过 jQuery 选择器来获取按钮和图片的 DOM 元素，并绑定按钮的点击事件。当用户点击按钮时，我们通过修改按钮的文本和图片的 src 属性来实现图片的切换。

运行 Flask 应用

在代码所在的目录中，执行以下命令来运行 Flask 应用：

python app.py

然后，在浏览器中访问 http://localhost:5000，你将看到一个包含按钮和图片的页面。当你点击按钮时，图片将切换为另一张。

这就是使用 Python 和 Flask 框架来实现点击按钮切换图片的基本过程。通过这个示例，你可以了解到如何使用 Flask 框架创建 Web 应用，并在页面中使用 JavaScript 来实现一些交互功能。希望这篇文章对你有所帮助！