在负载上进行jquery密钥计算的最有效方法

时间:2018-04-25 11:09:50

标签: javascript jquery html

使用jquery keyup change函数,我创建了一个计算框,根据输入执行某个计算。

但是假设在页面加载时输入已经有了一些值。如果在页面加载时输入不为空,那么显示该计算结果的最有效方法是什么?

这是示例代码段:

$(document).ready(function() {

    $(document).on("keyup change", "#num1, #num2", function() {

        var num1 = $('#num1').val();
        var num2 = $('#num2').val();

        var cal = 20 * num1 * num2;

        $('#result').html('The reslut is ' + cal);

    })

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number 1: <input name="num1" id="num1" type="number" value="4"><br>
Number 2: <input name="num2" id="num2" type="number" value="5"><br>
<div id="result"></div>

1 个答案:

答案 0 :(得分:3)

触发它 - 我使用输入,因为它也处理粘贴

$(function() {
  $(document).on("input", "#num1, #num2", function() {
    var num1 = $('#num1').val();
    var num2 = $('#num2').val();
    var cal = 20 * num1 * num2;
    $('#result').html('The result is ' + cal);
  });
  $("#num1").trigger("input");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number 1: <input name="num1" id="num1" type="number" value="4"><br> Number 2: <input name="num2" id="num2" type="number" value="5"><br>
<div id="result"></div>

或者命名该函数并运行它

function calc() {
  var num1 = $('#num1').val();
  var num2 = $('#num2').val();
  var cal = 20 * num1 * num2;
  $('#result').html('The result is ' + cal);
}
$(function() {
  $(document).on("input", "#num1, #num2", calc)
  calc();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number 1: <input name="num1" id="num1" type="number" value="4"><br> Number 2: <input name="num2" id="num2" type="number" value="5"><br>
<div id="result"></div>