Question

我正在开发一个关于测验的应用程序。

IMG1：[此图片中添加的评论也适用于IMG2]

IMG2：

说明

[IMG1]当选中一个或多个.js-answer-check复选框时，我将值保存在js数组中。然后，当单击#save-response按钮时，相应的数组将发送到服务器，以保存在数据库中。

[IMG2]然后我点击由.quiz-questions类标识的另一个测验问题，当检查此新问题的一个或多个.js-answer-check复选框时，这些值将保存在相同的js中阵列。

问题在于，由于answers.push(answerID)，所以前面的答案中的前一个复选框值仍然存在于数组中。

每次点击.quiz-questions按钮时，如何才能获取数组中相应问题答案的值？

预期值：

点击带有标签＆＃34; 2＆＃34;的复选框在第一个问题中=＆gt;数组应为[2]（该复选框中的data-id =＆＃34; 2＆＃34;属性）
点击带有标签＆＃34; 1 + 3＆＃34;的复选框和＆＃34; 8/2＆＃34;在第二个问题=＆gt;数组应为[4,5]，因为这些复选框有data-id =＆＃34; 4＆＃34;和data-id =＆＃34; 5＆＃34;属性。

实际结果：[2,4,5]

我尝试了这段代码：

//if one|more options are checked...
var answers = [];
$(document).on('click', '.js-answer-check', function(){
    if ($(this).is(':checked')){
        var answerID = $(this).data('id');
        answers.push(answerID);
    } else {
        var removeItem = $(this).data('id');
        answers = $.grep(answers, function(value){
            return value != removeItem;
        });
    }
});

$('#save-response').on('click', function(e){
    e.preventDefault();
    $.ajax({
        method: 'POST',
        url: Routing.generate('save_answer'),
        data: { answers: answers },
        success: function(resp) {
            if (resp.success) {
                var answersBack = resp.answers;
                for (var ans in answersBack) {
                    console.log('answerID = ', answersBack[ans]);
                }
            }
            //answers = [];
        }
    });
});

我认为如果我answers = []会重置初始数组，但它没有。

欢迎任何帮助。感谢。

稍后编辑

<div class="row margin-top-ten">
    <div class="col-6">
        <input type="hidden" id="quiz-id" data-quiz="{{ quiz.id }}"/>
        <div class="row question-content">{# the content (question-text + checkboxes) is coming from an AJAX request because I need to present everytime a new content based on `quiz-questions` buttons #}
        </div>
    </div>
</row>

<div class="row margin-top-ten">
    <div class="col-12">
        <button class="btn btn-primary btn-sm" type="button" id="save-response">Salveaza</button>
    </div>
</div>

<div class="row margin-top-fifty">
    <div class="col-12">
        {% set i = 1 %}
        <p>Navigator intrebari:</p>
        {% for question in quiz.questions %}
            <a href="" class="btn btn-info btn-sm quiz-question"
                               data-id="{{ question.id }}" data-quiz="{{ quiz.id }}">
                {{ i }}
            </a>
            {% set i = i + 1 %}
        {% endfor %}
    </div>
</div>

为每个quiz-questions按钮带来新内容的AJAX请求是：

<div class="col-12">
    <div class="row">
        <div class="col-12 question-text" data-question="{{ question.id }}">{{ question.content|raw }}</div>
    </div>
    <div class="row">
        {% for answer in question.answers %}
            <div class="col-12 question-answers">
                <span style="display: inline-block">
                    <label for="">
                        <input type="checkbox" name="user-responses[]" class="js-answer-check" data-question="{{ question.id }}" data-id="{{ answer.id }}">
                    </label>
                </span>
                <span style="display:inline-block">{{ answer.answer|raw }}</span>
            </div>
        {% endfor %}
    </div>
</div>

save_answer php功能只是返回发送数据，用于调试目的。没什么好看的。

每次点击不同的按钮时，如何始终获取新的复选框数组

0 个答案: