javascript 总结我检查过的输入

Question

 js__exam_questions();

    function js__exam_questions() {
     $('.js__sum_score_btn').on('click', function(event) {
      event.preventDefault();
      var num = 0;
      if ($('.js__checked_task input').is(':checked')) {
       num ++;
      } else {
       return false;
      }
      $('.js__checked_task');
      return $('.js__qustions_result').html( num || 'null');
     });
    }

.d-inline {
  display: inline-block;
}

.fz33 {
  font-size: 33px;
}

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section id="questions">
  <div class="questions__bg">
   <div class="container">
    <div class="row">

     <!-- head -->
     <div class="col-md-8">
      <div class="control-group">
       <h1>Questions:</h1>
       <button type="button" class="js__sum_score_btn btn btn-default mb50">SUMMARY</button>
      </div>
     </div>
     <div class="col-md-4">
      <div class="control-group">
       <h1 class="mr10 d-inline">Score:</h1><span class="js__qustions_result fz33">0</span>
      </div>
     </div>

     <!-- task-1 -->
     <div class="col-md-6 pb50 js__checked_task">
      <div id="myquestions-1">
       <h4 class="quest__h4">
             <strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1">Option 1
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1">Option 2
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1">Option 3
       </label>
      </div>
     </div>
     <!-- task-2 -->
     <div class="col-md-6 pb50 js__checked_task">
      <div id="myquestions-2">
       <h4 class="quest__h4">
             <strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_2">Option 1
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_2">Option 2
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_2">Option 3
       </label>
      </div>
     </div>
     <!-- task-3 -->
     <div class="col-md-6 pb50 js__checked_task">
      <div id="myquestions-3">
       <h4 class="quest__h4">
        <strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_3">Option 1
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_3">Option 2
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_3">Option 3
       </label>
      </div>
     </div>
     <!-- task-4 -->
     <div class="col-md-6 pb50 js__checked_task">
      <div id="myquestions-4">
       <h4 class="quest__h4">
         <strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_4">Option 1
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_4">Option 2
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_4">Option 3
       </label>
      </div>
     </div>
    </div>
   </div>
  </div>
 </section>

大家好，我正在尝试编写一个带评分的迷你测试。 我知道我需要使用'.each'，但暂时我不太明白如何正确使用它，这将分别计算每个答案。谢谢。

---

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam， quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 结果。 Duis aute irure dolor in reprehenderit in voluptate velit esse Cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidataat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Answer 1

我不确定您所说的“分别计算每个问题”是什么意思。但是如果你想要的是一个函数，在给定一组(预定的)正确答案的情况下，给你一个“你的分数是 X”的答案，那么你确实可以使用 jquery 的 each()。

您首先需要为您的每个答案(每个 block )提供“值”，例如:

<div class="col-md-6 pb50 js__checked_task">
      <div id="myquestions-1">
       <h4 class="quest__h4">
             <strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1" value='1'>Option 1
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1" value='2'>Option 2
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1" value='3'>Option 3
       </label>
      </div>
     </div> 
     <!-- Do the same for every block with value 1,2,3 -->

然后你可以定义下面的 jquery 函数

$('.js__sum_score_btn').on('click', function(event) {
    var score = 0;
    const answers = [1,1,2,3]; //your set of correct answers
    $('.js__checked_task').each(function(index) {
        var selectedQuestion = $("input[type='radio']:checked", this).val();
        if (selectedQuestion == answers[index]) {score++}
    })
    console.log('Your score is: ' + score);
});

编辑:如果你想在服务器端保持验证(即答案列表在那里)那么你可以在客户端保持处理然后将答案列表发送到服务器验证。一种方法是使用 ajax:

客户端js

$('.js__sum_score_btn').on('click', function(event) {
    var answers = []; //the user's set of answers
    $('.js__checked_task').each(function(index) {
        var selectedQuestion = $("input[type='radio']:checked", this).val();
        answers[index] = selectedQuestion;
    });
    $.ajax({
        url: 'your_server_url',
        data: {"answers": JSON.stringify(answers)},
        datatype: 'json',
        type: 'post',
        error: function() {//do stuff},
        success: function(data) {console.log('your score is ' + data.score)},
    })
});

这样，您的服务器端只需将发送给它的列表与一组答案进行比较，然后将分数作为答案传回。请注意，我给出的代码是一个使用 json 数据的示例，因此您将在服务器中获得的数据将是一个 json，并且您必须传回一个看起来像 {"score": score } 使其工作(如果它不是 json，ajax 将抛出错误，因为它的参数“数据类型”设置为“json”。

JSON.stringify() 方法是将列表作为 json 字符串发送所必需的。有关此方法的更多信息，您可以查找 there .