Question

我目前有一个用户计算器，输入数字并运行多个计算。目前该函数会在keyup上触发，如何在原始默认值出现时触发它？

此外，输入字段是一个数字字段，如果您单击向上/向下箭头以增加函数未触发的数字，因为我没有输入任何内容，我该如何解决这个问题功能呢？

所以从本质上讲，我希望通过3种不同的方式激活该功能 - 关键，加载和更改（通过浏览器箭头输入数字）。

<input type="number" name="perweek" id="per_week" value="<?php echo the_sub_field('default_value'); ?>">

这里是jquery：

$('#per_week').keyup(function(){
        var calcString = '';
        var result = 0;

        var calcStringq = '';
        var resultq = 0;

        var userInput = parseFloat($(this).val()).toFixed(2);

        if(!isNaN(userInput)) {
            for(var i = 0; i < calculations.length; i++) {

                calcString = userInput + calculations[i];
                result = eval(calcString);
                $('#result-' + i).text(result);

            }

            for (var x in calculationsq) {
                calcStringq = $('#result-' + x).text() + calculationsq[x];
                resultq = eval(calcStringq);
                $('#result-q-' + x).text(resultq);

            }   
        }

    });

Answer 1

根据这句话So in essence, I want the function to fire via 3 different ways - on keyup, on load and on change (via the browser arrows for a number input).

首先通过这些箭头表示您建议使用input事件。

这是jsbin 这应该通过使用侦听器

来工作

$('#per_week').on('keyup input', function(){
.............
});

选项1 为该函数命名并将其作为回调传递给所有必需的事件。

    function calculator(){
            var calcString = '';
            var result = 0;

            var calcStringq = '';
            var resultq = 0;

            var userInput = parseFloat($(this).val()).toFixed(2);

            if(!isNaN(userInput)) {
                for(var i = 0; i < calculations.length; i++) {

                    calcString = userInput + calculations[i];
                    result = eval(calcString);
                    $('#result-' + i).text(result);

                }

                for (var x in calculationsq) {
                    calcStringq = $('#result-' + x).text() + calculationsq[x];
                    resultq = eval(calcStringq);
                    $('#result-q-' + x).text(resultq);

                }   
            }


$('#per_week').keyup(calculator);
$('#per_week').change(calculator);
$('#per_week').input(calculator);
//for onload
$(document).ready(function(){
   calculator();
})

选项2 在您需要执行的任何地方触发keyup事件

     $('#per_week').keyup(function(){
            var calcString = '';
            var result = 0;

            var calcStringq = '';
            var resultq = 0;

            var userInput = parseFloat($(this).val()).toFixed(2);

            if(!isNaN(userInput)) {
                for(var i = 0; i < calculations.length; i++) {

                    calcString = userInput + calculations[i];
                    result = eval(calcString);
                    $('#result-' + i).text(result);

                }

                for (var x in calculationsq) {
                    calcStringq = $('#result-' + x).text() + calculationsq[x];
                    resultq = eval(calcStringq);
                    $('#result-q-' + x).text(resultq);

                }   
            }

        });
    $('#per_week').change(function(event){
      $(this).trigger('keyup');
    });
    $(document).ready(function(){
     $(this).trigger('keyup');
   });

Answer 2

$('#per_week').on('change', function() {
     // change event
 }).on('keydown', function(e) {
     if(e.which == 38) { // up key
         //up key event
     }
     else if(e.which == 40) {
         // down key event;
     }
 });

但加载事件让我很困惑？ $（function（）{...}）;

或$（＆＃39;＃per_week＆＃39;）。on（＆＃39; focus＆＃39;，function（）{...}）; ？

使用默认值获取触发功能？

2 个答案: