Django测验应用：为循环生成的答案按钮设置唯一ID并改色

一、修改模板生成唯一ID #

利用Django模板的循环变量，结合外层问题循环和内层答案循环的计数器，为每个按钮生成唯一ID，同时添加通用类和数据属性方便后续操作：

<div class="row">
    {% for question in questions %}
    <div class="col-md-4">
        <div class="card mb-2">
            <div class="card-body">
                <p>{{forloop.counter}}. {{ question.question|safe }}</p>
                <br>
                <div>
                    {% for answer in question.answers %}
                    <li>
                        <!-- 用问题序号+答案序号生成唯一ID -->
                        <button type="button" 
                                class="btn btn-primary answer-btn" 
                                id="answer-btn-{{forloop.parentloop.counter}}-{{forloop.counter}}"
                                data-question-num="{{forloop.parentloop.counter}}"
                                data-answer-content="{{answer}}">
                            {{ answer|safe }}
                        </button>
                    </li>
                    <br>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

关键修改点：

• 唯一ID：通过{{forloop.parentloop.counter}}（外层问题循环的序号）和{{forloop.counter}}（内层答案循环的序号）组合，比如第一个问题的第三个答案ID为answer-btn-1-3
• 通用类answer-btn：统一绑定点击事件，避免逐个操作ID
• data-*属性：存储问题序号和答案内容，Ajax请求时直接读取，无需从DOM解析文本

二、编写Ajax逻辑处理点击与样式修改 #

使用jQuery绑定按钮点击事件，发送请求验证答案后，根据返回结果修改按钮样式：

$(document).ready(function() {
    $('.answer-btn').click(function() {
        const $currentBtn = $(this);
        // 防止重复点击
        if ($currentBtn.hasClass('disabled')) return;

        // 从data属性获取请求所需数据
        const questionNum = $currentBtn.data('question-num');
        const answerContent = $currentBtn.data('answer-content');

        // 发送Ajax请求
        $.ajax({
            url: '/your-verify-url/', // 替换为你的Django视图URL
            method: 'POST',
            data: {
                'question_num': questionNum,
                'answer': answerContent,
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val() // Django必填CSRF令牌
            },
            success: function(response) {
                // 根据验证结果切换按钮样式
                if (response.is_correct) {
                    $currentBtn.removeClass('btn-primary').addClass('btn-success');
                } else {
                    $currentBtn.removeClass('btn-primary').addClass('btn-danger');
                }
                // 禁用按钮防止重复提交
                $currentBtn.addClass('disabled');
            },
            error: function() {
                alert('验证请求失败，请重试');
            }
        });
    });
});

三、Django视图示例（验证逻辑） #

编写视图接收请求，验证答案并返回JSON响应：

from django.http import JsonResponse

def verify_answer(request):
    if request.method == 'POST':
        question_num = request.POST.get('question_num')
        submitted_answer = request.POST.get('answer')
        
        # 替换为你的实际验证逻辑：比如从数据库查询对应问题的正确答案
        # 示例逻辑，需根据你的模型结构调整
        correct_answer = get_correct_answer_by_num(question_num) # 自定义函数获取正确答案
        is_correct = (submitted_answer == correct_answer)
        
        return JsonResponse({'is_correct': is_correct})
    return JsonResponse({'error': '无效请求'}, status=400)

记得在urls.py中配置对应路由，将/your-verify-url/指向该视图。

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