javascript - 学生的分数相加为一名学生的总分

Question

我的学校网络应用程序中有一个部分，允许我一次为特定类(class)的所有学生添加分数。 我最近添加了一些代码，可以使用 javascript 自动计算输入值的总和。

效果很好。问题是，所有学生的分数加起来都是一比一的。

请看下图

我希望每个学生都有自己的总分。

<?php }elseif($class_id >= 15 && $class_id <= 17){ ?>
<form action="<?php echo site_url('admin/mtprimary/assigngradeActionMT') ?>" method="POST" id="formSubjectTeacher">
<?php echo $this->customlib->getCSRF(); ?>
<div class="row">
<div class="col-lg-3">
<input type="hidden" name="class" value="<?php echo $class_id; ?>">
<input type="hidden" name="subject_id" value="<?php echo $subject_id; ?>">
</div>
<div class="col-lg-4">                                       
<h4><strong><?php echo $session_name; ?></strong></h4>
</div>
</div>
<br>
<hr>

<?php foreach($students as $student){?>
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<label>Student Name</label>
<input type="hidden" name="number[]"  value="">
<input type="hidden" name="section_id"  value="<?php echo $section_id; ?>">
<input type="hidden" name="session_id[]"  value="<?php echo $student->session_id; ?>">
<input type="hidden" name="student_id[]"  value="<?php echo $student->student_id; ?>">
<input type="hidden" name="class_id[]" value="<?php echo $class_id; ?>">
<input type="text" value="<?php echo $CI->GetStudentNameWithID($student->student_id); ?>" class="form-control "  readonly>
</div>
</div>
<div class="col-lg-1">
<label>Test1 </label>
<input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
input type="number" name="mt_ca1[]"  class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="t2">
<label>Test2</label>
<input type="number" name="mt_ca2[]"  class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="assg">
<label>Test3</label>
<input type="number" name="mt_ca3[]"  class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1">
<label>Total</label>
<output id="result"></output>
</div>
</div>

<script>
const $inputs = $('input[type="number"]')

$inputs.change(function() {
  var total = 0;
  $inputs.each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  $('#result').html(total);
});

</script>

Answer 1

正如已经指出的，您有多个 id 为 result 的元素，这是不允许的，您应该使用 result 类> 相反。但您的主要问题是您需要限定输入的总和以获得学生的总分。您可以通过查找更改的输入的类 row 的父 div 来完成此操作，然后仅对属于该 div 子级的输入求和。然后，您可以将总计存储到 result 输出中，该输出是该 div 的子级:

const $inputs = $('input[type="number"]')

$inputs.change(function() {
  var total = 0;
  var parent = $(this).closest('.row');
  parent.find('input[type="number"]').each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  parent.find('.result').html(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-3">
    <div class="form-group">
      <label>Student Name</label>
      <input type="hidden" name="number[]" value="">
      <input type="hidden" name="section_id" value="1">
      <input type="hidden" name="session_id[]" value="5">
      <input type="hidden" name="student_id[]" value="1">
      <input type="hidden" name="class_id[]" value="1">
      <input type="text" value="Bill" class="form-control " readonly>
    </div>
  </div>
  <div class="col-lg-1">
    <label>Test1 </label>
    <input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
    <input type="number" name="mt_ca1[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="t2">
    <label>Test2</label>
    <input type="number" name="mt_ca2[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="assg">
    <label>Test3</label>
    <input type="number" name="mt_ca3[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1">
    <label>Total</label>
    <output class="result"></output>
  </div>
</div>
<div class="row">
  <div class="col-lg-3">
    <div class="form-group">
      <label>Student Name</label>
      <input type="hidden" name="number[]" value="">
      <input type="hidden" name="section_id" value="1">
      <input type="hidden" name="session_id[]" value="5">
      <input type="hidden" name="student_id[]" value="2">
      <input type="hidden" name="class_id[]" value="1">
      <input type="text" value="Mary" class="form-control " readonly>
    </div>
  </div>
  <div class="col-lg-1">
    <label>Test1 </label>
    <input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
    <input type="number" name="mt_ca1[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="t2">
    <label>Test2</label>
    <input type="number" name="mt_ca2[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="assg">
    <label>Test3</label>
    <input type="number" name="mt_ca3[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1">
    <label>Total</label>
    <output class="result"></output>
  </div>
</div>