Flask 网站上多个按钮的 Jquery onclick 函数

Question

我正在尝试创建一个测验，问题显示在左侧，用户填写右侧的问题，然后旁边有一个按钮，您可以单击该按钮来查看您的输入是否正确。

我的问题是，代码似乎只针对第一个问题的第一个按钮，无论我按哪个按钮。因此，如果我的测验有 10 个问题（它们是用户在上一步中生成的），如果我单击问题 7 的结果按钮，它仍然只评估第一个问题。

我不确定如何为生成的每个问题提供唯一的 ID，因此我希望您能帮助我找到一种方法，使 Jquery 定位正确的问题。这是相关代码：

HTML：

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

Jquery：

$(document).ready(function() {

    $('.quizButton').click(function() {

        var answer = $('#quizInput').val();
        var question = $('#quizQuestion').text();

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

        req.done(function(data) {
           $('#result').text(data.result);
        });

        $('#quizSection').fadeOut(500).fadeIn(500);

    });

});

Answer 1

首先将不同的

id

转换为

class

，因为 HTML 页面上的多个

id

属性不能具有相同的值。它会创建无效的 HTML。

转换这些：

id="quizInput"

至

class="quizInput"

id="quizQuestion"

至

class="list-group-item flex-fill quizQuestion"

id="result"

至

class="result"

之后，您需要解决按下按钮的相应问题和答案，您可以通过

.closest

来完成

var obj = $(this);
var answer = obj.closest('ul').find('.quizInput').val();
var question = obj.closest('ul').find('.quizQuestion').text();

req.done(function(data) {
   obj.closest('ul').find('.result').text(data.result);
});

注意：由于

id

被 jQuery 视为唯一标识符，因此每当您使用它时，无论重复多少次，它都会为您提供第一次出现的数据。这就是使用

class

概念的原因。 （解决具有相同行为的多个元素）