Question

我希望平均来自四（4）个输入字段的数字（最小值为0，最大值为100）并动态显示结果（即不重新加载页面），任何字段都被填充。然后在最后一栏，是为了动态的等级。应该使用蓝色单元格显示A值介于80和100之间，使用绿色单元格显示介于60和80之间的值，依此类推。但等级不起作用。我还想使用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，其中包含准备保存的所有值。

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

如果总和值合适，我猜您已经完成了，请将switch更改为此。

     switch(ave) {
        case 100 <= ave >= 80 :
          $('#grade').css('background',"green").text('B');      
        break;
        //SIMILAR FOR OTHER CASES
    }

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

2 个答案: