Working codepen

Question

我想计算班级平均水平，并希望将输入存储在不同的变量中。但是，分数是一起计算的，我很难解决。我是否使用for循环重复方程式？请帮我！谢谢

这是我的代码笔： https://codepen.io/ivy-chung/pen/GBzmwb?editors=1010

$(document).ready(function() {
  //iterate through each textboxes
  $('.txtMarks').each(function() {

    // call 'calcSumAndAverage' method on keyup handler.
    $(this).keyup(function() {
      // check value is within range and is a number
      if (!isNaN(this.value) && this.value.length != 0 && this.value >= 0 && this.value <= 30) {

        calcGradeScore();
      } else {
        alert("Wrong number, number must be 0-30");
      }

    });
  });
});

function calcGradeScore() {
  var total = 0;
  var average = 0;
  var avgGrade;
  var img = document.createElement("img");

  //iterate through each textboxes with class name '.txtMarks'and add the values.
  $('.txtMarks').each(function() {

    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      total += parseFloat(this.value);
    }

  });

  //Calculate the Average
  if (!isNaN(total) && total != 0) {

    //Get count of textboxes with class '.txtMarks'
    var txtboxes = $('.txtMarks').length;
    average = parseFloat(total) / (txtboxes * 0.3);

  }

  if (average >= 80 && average < 100) {
    avgGrade = 'HD-High Distiction';
    img.src = "https://memegenerator.net/img/instances/19226146/first-assestment-of-the-year-gets-high-distinction.jpg";
  } else if (average >= 70 && average < 79) {
    avgGrade = 'D-Distiction';
    img.src = "https://memegenerator.net/img/instances/53639165/distinction-why-not-high-distinction.jpg";
  } else if (average >= 60 && average < 69) {
    avgGrade = 'C-Credit';
    img.src = "https://pics.me.me/the-face-you-make-cjthecreditfixer-when-you-check-your-credit-27495760.png";
  } else if (average >= 50 && average < 59) {
    avgGrade = 'P-Pass';
    img.src = "http://images.memes.com/meme/535301";
  } else if (average >= 0 && average < 49) {
    avgGrade = 'F-Failed';
    img.src = "https://www.36ng.ng/wp-content/uploads/2015/09/Exam-fail-3.jpg";
  }
  //Show Total Marks.
  $('#totalMarks').html(total);
  // Show Average upto 2 decimal places using .toFixed() method.
  $('#average').html(average.toFixed(1) + "%");
  // S
  $('#grade').html(avgGrade);
  //
  $('#image').html(img);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Grade Calculator</h1>
<table class="grade-table">
  <tr class="label">
    <td colspan="2">Please enter student's classwork score out of 30:</td>
  </tr>
  <tr>
    <td>Subject 1:</td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>
  <tr>
    <td>Subject 2: </td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>
  <tr>
    <td>Subject 3:</td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>

  <tr class="label">
    <td class="right">Total Marks :</td>
    <td class="center"><span id="totalMarks">0</span></td>
  </tr>
  <tr class="label">
    <td class="right">Average Percentage :</td>
    <td class="center"><span id="average">0</span></td>
  </tr>

  <tr class="label">
    <td class="right">Grade:</td>
    <td class="center"><span id="grade">0</span></td>
  </tr>
  <tr class="label">
    <td class="right"></td>
    <td class="center"><span id="image"></span></td>
  </tr>
</table>

<table class="grade-table">
  <tr class="label">
    <td colspan="2">Please enter student's classwork score out of 30:</td>
  </tr>
  <tr>
    <td>Subject 1:</td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>
  <tr>
    <td>Subject 2: </td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>
  <tr>
    <td>Subject 3:</td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>

  <tr class="label">
    <td class="right">Total Marks :</td>
    <td class="center"><span id="totalMarks">0</span></td>
  </tr>
  <tr class="label">
    <td class="right">Average Percentage :</td>
    <td class="center"><span id="average">0</span></td>
  </tr>

  <tr class="label">
    <td class="right">Grade:</td>
    <td class="center"><span id="grade">0</span></td>
  </tr>
  <tr class="label">
    <td class="right"></td>
    <td class="center"><span id="image"></span></td>
  </tr>

</table>

Answer 1

由于您正在为Total Marks，Average Percentage，Grade和image使用重复ID，所以不要使用重复ID而是使用类名并通过

访问

$(this).closest('table').find('.classname')

因此将为您提供当前表格元素，并且计算将反映该特定表格。

Working codepen

代码片段

 $(document).ready(function() {
     //iterate through each textboxes
     $('.txtMarks').each(function() {

         // call 'calcSumAndAverage' method on keyup handler.
         $(this).keyup(function() {
             // check value is within range and is a number
             if (!isNaN(this.value) && this.value.length != 0 && this.value >= 0 && this.value <= 30) {
                 calcGradeScore($(this).closest('table'));
             } else {
                 alert("Wrong number, number must be 0-30");
             }

         });
     });
 });

 function calcGradeScore(el) {
     var total = 0,
         average = 0,
         avgGrade,
         img = document.createElement("img"),
         txtMarks = el.find('.txtMarks');

     //iterate through each textboxes with class name '.txtMarks'and add the values.
     txtMarks.each(function() {
         //add only if the value is number
         if (!isNaN(this.value) && this.value.length != 0) {
             total += parseFloat(this.value);
         }
     });

     //Calculate the Average
     if (!isNaN(total) && total != 0) {
         //Get count of textboxes with class '.txtMarks'
         var txtboxes = txtMarks.length;
         average = parseFloat(total) / (txtboxes * 0.3);
     }

     if (average >= 80 && average < 100) {
         avgGrade = 'HD-High Distiction';
         img.src = "https://memegenerator.net/img/instances/19226146/first-assestment-of-the-year-gets-high-distinction.jpg";
     } else if (average >= 70 && average < 79) {
         avgGrade = 'D-Distiction';
         img.src = "https://memegenerator.net/img/instances/53639165/distinction-why-not-high-distinction.jpg";
     } else if (average >= 60 && average < 69) {
         avgGrade = 'C-Credit';
         img.src = "https://pics.me.me/the-face-you-make-cjthecreditfixer-when-you-check-your-credit-27495760.png";
     } else if (average >= 50 && average < 59) {
         avgGrade = 'P-Pass';
         img.src = "http://images.memes.com/meme/535301";
     } else if (average >= 0 && average < 49) {
         avgGrade = 'F-Failed';
         img.src = "https://www.36ng.ng/wp-content/uploads/2015/09/Exam-fail-3.jpg";
     }
     //Show Total Marks.
     el.find('.totalMarks').html(total);
     // Show Average upto 2 decimal places using .toFixed() method.
     el.find('.average').html(average.toFixed(1) + "%");
     // S
     el.find('.grade').html(avgGrade);
     //
     el.find('.image').html(img);
 }

Answer 2

您可以添加父选择器以计算每个表的平均值

len(3)

创建一个循环以计算平均分数

2 个答案:

Working codepen