0

我有以下问题：

当以下输入中的值更改时，#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 改变时更新
4

2 回答 2

2

我建议：

// 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 小提琴演示。

参考：

于 2013-06-04T20:55:44.740 回答
0

您需要创建一个执行计算的 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 脚本中对它们的引用进行硬编码。

您还需要添加验证，以确认用户实际上在您的输入中输入了数字。

于 2013-06-04T20:54:13.960 回答