Question

我有以下问题：

当以下输入中的值发生变化时，字段#result应该更改。

 <input type="text" data-original-value="320" value="320" name="value1" id="value1" class="restorable">
 <input type="text" data-original-value="125" value="125" name="value2" id="value2" class="restorable">
 <input type="text" data-original-value="0.5" value="0.5" name="value3" id="value3" class="restorable">


    (function ($) {
     $(document).ready(function () {
         $('#coverage').keyup(function () {
             var raw = $('#value1').text()-( $('#value2').text()* $('#value3').text());
             var fixed = raw.toFixed();
             $('#result').text(fixed);
         });
     });
 }(jQuery));

在更改1值时有效，但如何使其成为可能

#result是在加载页面时计算的
#result在value1或value2或value3更改时更新

Answer 1

我建议：

// bind the 'keyup' event to the elements:
$('input.restorable').keyup(function(){
    // set the text of the '#result' element:
    $('#result').text(function(){
        // initialise a variable to hold the value:
        var total = 0;
        // get the relevant sibling 'input' elements, and iterate over them:
        $(this).siblings('input.restorable').each(function(){
            /* add the value, using parseFloat() to make it a numeric value,
               to that total variable: */
            total += parseFloat(this.value);
        })
        // set the text to the value of that variable
        return total;
    });
// trigger the function bound on 'keyup' by triggering a 'keyup' event:
}).trigger('keyup');

JS Fiddle demo

参考文献：

Answer 2

您需要创建一个执行计算的jQuery函数，然后将事件侦听器附加到您的每个字段：

$('#value1, #value2, #value3').on('keyup', function() {
    calculate();
});

var calculate = function() {
    var result = $('#value1').val() - ($('#value2').val() * $('#value3').val());
    $('#result').text(result.toFixed(2));
};

我会重新考虑这一点，方法是在HTML元素中添加一个公共类或数据属性，将其标识为计算的一部分，这样您就不必在jQuery脚本中对其引用进行硬编码。

您还需要添加用户实际在输入中输入数字的验证。

使用可变输入字段计算

2 个答案: