如何将动态值关联至HTML元素？实现带问卷ID的可点击列表跳转

嘿，作为HTML新手，咱们一步步来拆解这个需求，保证你能看懂😎

第一步：修复模板循环语法+传递问卷ID到链接 #

你原来的模板里有个小语法错误——Jinja2模板（Flask常用的模板引擎）的循环标签是{% for %}和{% endfor %}，不是{ for }哦！另外，要让点击列表项时把问卷ID传给后端，得把链接的href改成带ID的格式，这样后端才能知道要加载哪个问卷。

修改后的模板代码：

{% extends "layout.html" %} 
{% block title %} Take Survey {% endblock %} 
{% block main %} 
<div class="list-group">
    {% for search in searches %}
        <!-- 把问卷ID作为URL参数传递给take路由 -->
        <a href="/take/{{ search.id }}" class="list-group-item">{{ search.topic }}</a>
    {% endfor %}
</div>
{% endblock %}

这里的{{ search.id }}会自动替换成每个问卷的真实ID，最终生成的链接会是类似/take/1、/take/2这样的格式，对应不同的问卷。

第二步：修改后端take路由，接收问卷ID #

接下来要在你的后端（比如Flask）里修改take路由，让它能接收URL里的问卷ID参数。假设你用的是Flask，代码大概是这样：

from flask import render_template, request
import sqlite3  # 或者你用的其他数据库库，比如SQLAlchemy

@app.route('/take/<int:survey_id>')
def take_survey(survey_id):
    # 这里survey_id就是从URL里传过来的问卷ID啦
    # 接下来我们要从数据库里查询这个问卷的内容
    return render_template('take_survey.html', survey_id=survey_id)

<int:survey_id>是Flask的路由转换器，它会确保传过来的是整数类型（和你数据库里surveys表的id类型匹配），避免非法参数。

第三步：通过SQL查询加载对应问卷的所有内容 #

现在我们要根据survey_id，从你那四张关联表里取出问卷的问题和选项。因为你的表关联是users ← surveys ← questions ← options，我们可以用SQL的JOIN语句一次性把相关数据查出来，或者分步查询（新手推荐分步，更容易理解）。

方式1：分步查询（新手友好） #

def take_survey(survey_id):
    # 连接数据库
    conn = sqlite3.connect('your_database.db')
    conn.row_factory = sqlite3.Row  # 让查询结果可以像字典一样访问
    cursor = conn.cursor()

    # 1. 查询问卷基本信息（包括创建者，可选）
    cursor.execute("SELECT s.id, s.topic, u.username FROM surveys s JOIN users u ON s.user_id = u.id WHERE s.id = ?", (survey_id,))
    survey = cursor.fetchone()

    if not survey:
        # 如果问卷不存在，返回404页面或者提示
        return "Survey not found", 404

    # 2. 查询该问卷下的所有问题
    cursor.execute("SELECT id, text FROM questions WHERE survey_id = ? ORDER BY id", (survey_id,))
    questions = cursor.fetchall()

    # 3. 为每个问题查询对应的选项
    survey_data = {
        "id": survey["id"],
        "topic": survey["topic"],
        "creator": survey["username"],
        "questions": []
    }

    for question in questions:
        cursor.execute("SELECT id, text FROM options WHERE question_id = ? ORDER BY id", (question["id"],))
        options = cursor.fetchall()
        survey_data["questions"].append({
            "id": question["id"],
            "text": question["text"],
            "options": options
        })

    conn.close()

    # 把查询到的问卷数据传给模板
    return render_template('take_survey.html', survey=survey_data)

方式2：单条JOIN查询（更高效） #

如果想一次性查完所有数据，可以用JOIN语句：

cursor.execute("""
    SELECT s.id AS survey_id, s.topic, u.username AS creator,
           q.id AS question_id, q.text AS question_text,
           o.id AS option_id, o.text AS option_text
    FROM surveys s
    JOIN users u ON s.user_id = u.id
    JOIN questions q ON s.id = q.survey_id
    JOIN options o ON q.id = o.question_id
    WHERE s.id = ?
    ORDER BY q.id, o.id
""", (survey_id,))
results = cursor.fetchall()

# 把查询结果整理成嵌套结构（问卷→问题→选项）
survey_data = None
current_question = None
for row in results:
    if not survey_data:
        survey_data = {
            "id": row["survey_id"],
            "topic": row["topic"],
            "creator": row["creator"],
            "questions": []
        }
    if not current_question or current_question["id"] != row["question_id"]:
        current_question = {
            "id": row["question_id"],
            "text": row["question_text"],
            "options": []
        }
        survey_data["questions"].append(current_question)
    current_question["options"].append({
        "id": row["option_id"],
        "text": row["option_text"]
    })

这种方式减少了数据库查询次数，适合数据量较大的情况。

第四步：创建问卷填写页面模板（take_survey.html） #

最后我们要做一个模板来展示问卷内容，让用户可以填写。比如用表单提交答案，这里举个简单的例子：

{% extends "layout.html" %} 
{% block title %} {{ survey.topic }} {% endblock %} 
{% block main %}
<h1>{{ survey.topic }}</h1>
<p>Created by: {{ survey.creator }}</p>

<form action="/submit_survey" method="post">
    <!-- 隐藏域传递问卷ID，提交时传给后端 -->
    <input type="hidden" name="survey_id" value="{{ survey.id }}">

    {% for question in survey.questions %}
        <div class="mb-4">
            <h5>Q{{ loop.index }}: {{ question.text }}</h5>
            {% for option in question.options %}
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="question_{{ question.id }}" id="option_{{ option.id }}" value="{{ option.id }}" required>
                    <label class="form-check-label" for="option_{{ option.id }}">
                        {{ option.text }}
                    </label>
                </div>
            {% endfor %}
        </div>
    {% endfor %}

    <button type="submit" class="btn btn-primary">Submit Survey</button>
</form>
{% endblock %}

这里用了loop.index来显示问题序号，每个问题的选项用单选按钮（如果是多选可以改成type="checkbox"），表单提交时会把问卷ID和每个问题的选项ID传给后端的/submit_survey路由（这个路由你需要自己创建，用来保存用户的答案）。

内容的提问来源于stack exchange，提问作者APE