Flask网站多按钮jQuery onclick仅触发首个问题的解决求助

问题根源 #

你遇到的核心问题是重复使用了相同的ID——HTML规范里ID必须是唯一的，但你循环生成每道题时，都用了quizSection、quizQuestion、quizInput、result这些重复ID。jQuery用ID选择器时只会返回第一个匹配的元素，所以不管点哪个按钮，都只会取第一题的内容进行验证。

解决方案 #

第一步：修改HTML结构（去掉重复ID，改用类或唯一标识）

把循环里的重复ID换成类（或带循环索引的唯一ID），确保每道题的元素都包裹在独立的父容器里，方便后续DOM定位：

{% for element in range(length) %}
<div class="m-5 quizSection">
    <ul class="list-group list-group-horizontal">
      <li class="list-group-item flex-fill quizQuestion">{{ quiz_questions[element] }}</li>
        <li class="list-group-item flex-fill">
            <div class="form-group">
                <label for="quizInput-{{element}}">Check</label><br>
                <input type="text" class="quizInput" id="quizInput-{{element}}"><br>
            </div>
            <button class="btn btn-primary m-2 quizButton">See if correct</button>
        </li>
        <li class="quizResult">
            <p>
                if true: {{ result }}
            </p>
        </li>
    </ul>
</div>
{% if quiz_questions[element] == quiz_answers[element] %}
<p>{{ quiz_questions[element] }}</p>
<p>{{ quiz_answers[element] }}</p>
{% endif %}
{% endfor %}

改动说明：

• 把重复的ID（quizSection、quizQuestion、result）替换成类（quizSection、quizQuestion、quizResult）
• 输入框的ID加上{{element}}后缀，保证唯一，同时对应修改label的for属性

第二步：修改jQuery逻辑（通过DOM遍历定位当前题的元素）

点击按钮时，不要用全局ID选择器，而是通过$(this)定位到当前按钮，再向上找到当前题的父容器，只在这个容器内查找对应元素：

$(document).ready(function() {
    $('.quizButton').click(function() {
        // 定位当前按钮所属的题目区块
        var $currentSection = $(this).closest('.quizSection');
        // 在当前区块内获取输入答案和题目文本
        var answer = $currentSection.find('.quizInput').val();
        var question = $currentSection.find('.quizQuestion').text();

        req = $.ajax({
           url: '/evaluate',
           type: 'GET',
           contentType: 'application/json',
           data: {answer: answer, question: question}
        });

        req.done(function(data) {
            // 只更新当前题的结果区域
            $currentSection.find('.quizResult').text(data.result);
        });

        // 仅对当前题区块执行动画
        $currentSection.fadeOut(500).fadeIn(500);
    });
});

关键逻辑：

• $(this).closest('.quizSection')：从当前点击的按钮向上查找最近的题目区块，确保只操作当前题的元素
• 所有元素查找和更新都限制在$currentSection范围内，彻底避免了跨题干扰

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