Question

我正在使用测验网络应用程序在Django工作，需要在每个问题上保留一个表单。问题显示得恰到好处。尝试提交带有问题的表单时会出现问题。

问题的答案（multichoice，4个答案）显示在<li>个元素中。我希望通过单击答案（因此，单击<li>元素）来提交答案，以便显示下一个问题。我无法使它工作，所以我无法提交任何答案。表单HTML如下所示：

<form id="game" action="" method="POST">{% csrf_token %}
  <input type="hidden" name="question_id" value="{{ question.id }}">
  <input type="hidden" name="answer">
  <ul class="list-group">

    {% for answer in form.answers %}
        <li class="list-group-item" name="answer" value="{{answer}}">
    {% endfor %}
</ul>

jQuery就像这样：

$(document).ready(function() {
    $('#game li').click(function() {
         $('input[name="answer"]').val($(this).value('answer'));
         $('#game').submit();
    });
});

单击答案“<li>时没有任何结果，控制台显示无日志。我怎么能让它起作用？三江源。

编辑1：

是的，我有管理测验的 views.py ，这是一个片段：

class QuizTake(FormView):
    form_class = QuestionForm
    template_name = 'question.html'

    def dispatch(self, request, *args, **kwargs):
        self.quiz = get_object_or_404(Quiz, url=self.kwargs['quiz_name'])
        if self.quiz.draft and not request.user.has_perm('quiz.change_quiz'):
            raise PermissionDenied

        self.logged_in_user = self.request.user.is_authenticated()

        if self.logged_in_user:
            self.sitting = Sitting.objects.user_sitting(request.user,
                                                        self.quiz)
        else:
            self.sitting = self.anon_load_sitting()

        if self.sitting is False:
            return render(request, 'single_complete.html')

        return super(QuizTake, self).dispatch(request, *args, **kwargs)

    def get_form(self, form_class):
        if self.logged_in_user:
            self.question = self.sitting.get_first_question()
            self.progress = self.sitting.progress()
        else:
            self.question = self.anon_next_question()
            self.progress = self.anon_sitting_progress()

        if self.question.__class__ is Essay_Question:
            form_class = EssayForm

        return form_class(**self.get_form_kwargs())

    def get_form_kwargs(self):
        kwargs = super(QuizTake, self).get_form_kwargs()

        return dict(kwargs, question=self.question)

    def form_valid(self, form):
        if self.logged_in_user:
            self.form_valid_user(form)
            if self.sitting.get_first_question() is False:
                return self.final_result_user()
        else:
            self.form_valid_anon(form)
            if not self.request.session[self.quiz.anon_q_list()]:
                return self.final_result_anon()

        self.request.POST = {}

        return super(QuizTake, self).get(self, self.request)

    def get_context_data(self, **kwargs):
        context = super(QuizTake, self).get_context_data(**kwargs)
        context['question'] = self.question
        context['quiz'] = self.quiz
        if hasattr(self, 'previous'):
            context['previous'] = self.previous
        if hasattr(self, 'progress'):
            context['progress'] = self.progress
        return context

    def form_valid_user(self, form):
        progress, c = Progress.objects.get_or_create(user=self.request.user)
        guess = form.cleaned_data['answers']
        is_correct = self.question.check_if_correct(guess)

        if is_correct is True:
            self.sitting.add_to_score(1)
            progress.update_score(self.question, 1, 1)
        else:
            self.sitting.add_incorrect_question(self.question)
            progress.update_score(self.question, 0, 1)

        if self.quiz.answers_at_end is not True:
            self.previous = {'previous_answer': guess,
                             'previous_outcome': is_correct,
                             'previous_question': self.question,
                             'answers': self.question.get_answers(),
                             'question_type': {self.question
                                               .__class__.__name__: True}}
        else:
........

此外，这是从 forms.py ：

获取其信息

class QuestionForm(forms.Form):
    def __init__(self, question, *args, **kwargs):
        super(QuestionForm, self).__init__(*args, **kwargs)
        choice_list = [x for x in question.get_answers_list()]
        self.fields["answers"] = forms.ChoiceField(choices=choice_list,
                                                   widget=forms.RadioSelect)

我已经更改了您提供的代码并尝试了不同的组合，但仍然无法正常工作。我无法提交表单，控制台显示没有错误。这不可能吗？

编辑2：

当我更改HTML代码并尝试将“<li>”标记添加为：

<li class="list-group-item" name="answer" data-answer="{{answer}}">{{answer}}</li>

我将此作为输出（在这种情况下，2个可能的答案，显示2 <li>个元素）：

当我退出li元素的'data-answer'时，它会得到：

现在，当我将鼠标放在文本上时，它在'cursor:pointer'之前没有得到'False">'。但是，当我点击它时没有任何反应。可能是'views.py'中的问题吗？在我以前使用“提交”按钮之前它运作良好。 @JacobWindsor

我是否对这个问题有所了解？我很困惑，谢谢你的答案。

Answer 1

我对你的用例感到有点困惑。听起来您希望在单击多项选择问题时向服务器发送AJAX请求。然后，服务器响应下一个呈现在表单中的问题。如果是这种情况，那么它比你提供的要复杂一些。你需要：

抓住所选答案（就像你一样）
向服务器发出AJAX请求但不使用表单提交功能。
将答案存储在服务器上。
渲染下一个问题

但是，根据您提供的代码和说明，我可以看到选择器不正确。

试试这个：

$('#game ul.list-group li').click(function(){...});

但是，我建议使用delegated events，因为如果你有很多列表项，开销就会低很多。

$('#game ul.list-group').on('click', 'li', function(){...});

如果您想动态添加或删除问题，这也会有所帮助，因为您不需要绑定任何新的事件处理程序。因为您说＆＃34;答案已提交，因此可以显示下一个问题＆＃34;我假设你正在做一些动态的问题补充。

Answer 2

您尚未关闭li代码

<li class="list-group-item" name="answer" value="{{answer}}">{{answer}}</li>

此外，李没有价值属性，因此你无法抓住它......试试这个

<li class="list-group-item" name="answer" data-answer="{{answer}}">{{answer}}</li>

$(document).ready(function() {
    $('#game li').click(function() {
         $('input[name="answer"]').val($(this).data('answer'));
         $('#game').submit();
    });
});

使用jQuery

2 个答案: