学生的分数加起来是一个学生的总分答案

【问题标题】：Scores of students adding up on one student's total score学生的分数加起来是一个学生的总分
【发布时间】：2020-01-19 12:52:21
【问题描述】：

我的学校网络应用程序中有一个部分允许我一次为特定班级的所有学生添加分数。我最近添加了一些使用 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>

【问题讨论】：

标签： javascript php jquery codeigniter

【解决方案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>

【讨论】：

【解决方案2】：

属性id 在文档中必须是唯一的，请改用class。首先用class更改HTML。

来自

<output id="result"></output>

到

<output class="result"></output>

在 jQuery 中改变

$('#result').html(total);

到

$(this).parent().next().find('.result').text(total);

请注意：如果文本是纯字符串（不是htmlString），最好使用text() 而不是html()。

我也更喜欢input 事件而不是change 通过更改输出即时更改

$inputs.change(function() {

到

$inputs.on('input', function() {

【讨论】：