结合更改和 keyup

Question

我有一个用于计算产品成本的表格。这取决于他们输入的输入值和他们选择的 select。

有没有办法将 change 和 keyup 事件合并到一个更清晰的片段中？

我的代码如下：

$('#input').keyup(function(){
    var x = $('#input').val();
    var y = $('#select').val(); 
    if (y == '5') {
        var z = 5;
    }
    else if (y == '10') {
        var z = 10;
    }
    var z = x * y;
    $('#total').html(z);
});

$('#select').change(function(){
    var x = $(this).val();
    var y = $('#input').val();
    if (x == '5') {
        var z = 5;
    }
    else if (x == '10') {
        var z = 10;
    }
    var a = y * z;
    $('#total').html(a);
});

谢谢。

Answer 1

您可以使用一个逗号分隔的选择器来获取这两个元素。然后，如果您使用 on() 方法，您可以提供一个 space 分隔的字符串，其中包含您要绑定的事件名称，如下所示：

$('#input, #select').on('keyup change', function() {
    var x = $('#input').val();
    var y = $('#select').val();

    if (y == '5') {
        var z = 5;
    }
    else if (y == '10') {
        var z = 10;
    }

    var z = x * y;
    $('#total').html(z);
});

另请注意，您的逻辑中的 if 条件完全是多余的，因为您无论如何都会在最后覆盖 z 的值

Answer 2

这是工作代码：

 $(document).on("keyup change", "#input, #select", function(){
 var x = $('#select').val();
     var y = $('#input').val();

    if (x == '5') {
                var z = 5;
    }
    else if (x == '10') {
                var z = 10;
    }
    var a = y * z;
    $('#total').html(a);})

https://jsfiddle.net/itsrikin/gaL237qg/

结合更改和 keyup

Combining change and keyup

javascript

jquery

events

onchange