jquery - 如何平均数字并动态显示结果

Question

我想对来自四 (4) 个输入字段(最小值为 0，最大值为 100)的数字进行平均，并动态显示结果(即无需重新加载页面)立即填充任何字段。然后在最后一列中，也是动态的成绩。应该用蓝色单元格显示 80 到 100 之间的值 A，用绿色单元格显示 60 到 80 之间的值 B，依此类推。但是等级不起作用。我还想使用 ajax 将数据动态输入到数据库中，但我不知道该怎么做。下面是我想出的。提前致谢。下面是代码

$('#input1').keyup(function() {
  evaluate();
});
$('#input2').keyup(function() {
  evaluate();
});
$('#input3').keyup(function() {
  evaluate();
});
$('#input4').keyup(function() {
  evaluate();
});

var evaluate = function() {
  var input1 = parseInt($('#input1').val());
  var input2 = parseInt($('#input2').val());
  var input3 = parseInt($('#input3').val());
  var input4 = parseInt($('#input4').val());

  if (isNaN(input1) || isNaN(input2) || isNaN(input3) || isNaN(input4)) {
    $('#error').text('Inputs must be numbers');
  } else {
    var ave = (input1 + input2 + input3 + input4) / 4;
    $('#total').text(input1 + input2 + input3 + input4);
    $('#ave').text(ave);

    switch (ave) {
      case 100 <= ave >= 80:
        $('#grade').text('<div bgcolor="blue">A</div>');
        break;
      case 80 < ave >= 60:
        $('#grade').text('<div bgcolor="green">B</div>');
        break;
      case 60 < ave >= 40:
        $('#grade').text('<div bgcolor="yellow">C</div>');
        break;
      case 40 < ave >= 20:
        $('#grade').text('<div bgcolor="red">D</div>');
        break;
      case 20 < ave >= 0:
        $('#grade').text('<div bgcolor="green">E</div>');
        break;
      default:
        $('#grade').text('<div>--</div>');
    }
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Input 1</th>
    <th>Input 2</th>
    <th>Input 3</th>
    <th>Input 4</th>
    <th>Total</th>
    <th>Average</th>
    <th>Grade</th>
  </tr>

  <tr>
    <td>
      <input id="input1" name="input1" size="1px" />
    </td>
    <td>
      <input id="input2" name="input2" size="1px" />
    </td>
    <td>
      <input id="input3" name="input3" size="1px" />
    </td>
    <td>
      <input id="input4" name="input4" size="1px" />
    </td>
    <td id="total"></td>
    <td id="ave"></td>
    <td id="grade"></td>
  </tr>
</table>
<div id="error"></div>

Answer 1

JavaScript 不支持您用于检查 avg 的比较，换句话说，您不能执行 0 > avg > 1。 Here's more on that matter.

这是您要实现的目标的工作示例。

更新:这是一个 Fiddle具有准备保存的所有值的同一脚本。

$(function() {
  function evaluate() {
    var input1 = parseInt($('#input1').val(), 10);
    var input2 = parseInt($('#input2').val(), 10);
    var input3 = parseInt($('#input3').val(), 10);
    var input4 = parseInt($('#input4').val(), 10);

    if (isNaN(input1) || isNaN(input2) || isNaN(input3) || isNaN(input4)) {
      $('#error').text('Inputs must be numbers');
    } else {

      $('#error').remove();

      var message = '<div>--</div>',
        ave = (input1 + input2 + input3 + input4) / 4;
      $('#total').text(input1 + input2 + input3 + input4);
      $('#ave').text(ave);

      if (ave >= 80) {
        message = '<div class="blue">A</div>';
      } else if (80 > ave && ave >= 60) {
        message = '<div class="green">B</div>';
      } else if (60 > ave && ave >= 40) {
        message = '<div class="yellow">C</div>';
      } else if (40 > ave && ave >= 20) {
        message = '<div class="red">D</div>';
      } else if (20 > ave && ave >= 0) {
        message = '<div class="green">E</div>';
      }

      $('#grade').empty().html(message);
    }
  };

  $('.input').on('change', evaluate);
});

input {
  max-width: 50px;
}
table td {
  padding: 0 10px;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.yellow {
  background: yellow;
}
.red {
  background: blue;
}

<link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Input 1</th>
    <th>Input 2</th>
    <th>Input 3</th>
    <th>Input 4</th>
    <th>Total</th>
    <th>Average</th>
    <th>Grade</th>
  </tr>

  <tr>
    <td>
      <input id="input1" class="input" type="number" value="0" name="input1">
    </td>
    <td>
      <input id="input2" class="input" type="number" value="0" name="input2">
    </td>
    <td>
      <input id="input3" class="input" type="number" value="0" name="input3" />
    </td>
    <td>
      <input id="input4" class="input" type="number" value="0" name="input4">
    </td>
    <td id="total"></td>
    <td id="ave"></td>
    <td id="grade"></td>
  </tr>
</table>
<div id="error"></div>