Question

这是HTML代码：

<input type="number" class="small" value="0" step="any" id="input_1_0" name="input_25">
<input type="number" class="small" value="0" step="any" id="input_1_1" name="input_26">
<input type="number" class="small" value="0" step="any" id="input_1_2" name="input_27">
<p><b>Total:</b> <span id="total_cost">0</span></p>

这是jQuery：

var total_cost;
jQuery(document).ready(function(){
jQuery('input').change(function() {
    var input1 = Number((jQuery('#input_1_0').val()).replace(/[^0-9\.]+/g,""));
    var input2 = Number((jQuery('#input_1_1').val()).replace(/[^0-9\.]+/g,""));
    var input3 = Number((jQuery('#input_1_2').val()).replace(/[^0-9\.]+/g,""));      
    total_cost = input1 + input2 + input3;  
});

jQuery(function(){  
    jQuery('#total_cost').text(total_cost);    
    });
});

由于某些原因，在输入字段中输入数值时，不会更新Total。任何帮助将不胜感激。

Answer 1

因为此代码是异步执行的。您在change被触发时想要更新变量，然后更新某些内容，但没有调用第二个jQuery函数。它在文档准备好后运行一次。执行绑定事件，然后运行第二个jQuery IIFE一次。我甚至不知道为什么你想要它自己的功能。就这样做：

jQuery(document).ready(function(){
    jQuery('input').change(function() {
        var input1 = Number((jQuery('#input_1_0').val()).replace(/[^0-9\.]+/g,""));
        var input2 = Number((jQuery('#input_1_1').val()).replace(/[^0-9\.]+/g,""));
        var input3 = Number((jQuery('#input_1_2').val()).replace(/[^0-9\.]+/g,""));
        var total_cost = input1 + input2 + input3;
        jQuery('#total_cost').text(total_cost);
    });
});

这不能完全回答你的问题，所以这里是你如何按照你的标准来完成它。

jQuery(document).ready(function() {
    var total_cost = 0;
    var update_total_cost = function() {  
        jQuery('#total_cost').text(total_cost);
    };

    jQuery('input').change(function() {
        var input1 = Number((jQuery('#input_1_0').val()).replace(/[^0-9\.]+/g,""));
        var input2 = Number((jQuery('#input_1_1').val()).replace(/[^0-9\.]+/g,""));
        var input3 = Number((jQuery('#input_1_2').val()).replace(/[^0-9\.]+/g,""));

        total_cost = input1 + input2 + input3;
        update_total_cost();
    });
});

这是有效的，因为它为更新文本函数提供了一个名称，并在事件触发后调用它。

Answer 2

您需要更新total_cost更改事件

上的input文字

＆＃13;

var total_cost;

jQuery('input').change(function() {
  var input1 = Number((jQuery('#input_1_0').val()).replace(/[^0-9\.]+/g, ""));
  var input2 = Number((jQuery('#input_1_1').val()).replace(/[^0-9\.]+/g, ""));
  var input3 = Number((jQuery('#input_1_2').val()).replace(/[^0-9\.]+/g, ""));
  total_cost = input1 + input2 + input3;
  jQuery('#total_cost').text(total_cost);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="small" value="0" step="any" id="input_1_0" name="input_25">
<input type="number" class="small" value="0" step="any" id="input_1_1" name="input_26">
<input type="number" class="small" value="0" step="any" id="input_1_2" name="input_27">
<p><b>Total:</b>  <span id="total_cost">0</span>
</p>

＆＃13;

您可以{n}输入更改trigger自定义事件

＆＃13;

var total_cost;

jQuery('input').change(function() {
  var input1 = Number((jQuery('#input_1_0').val()).replace(/[^0-9\.]+/g, ""));
  var input2 = Number((jQuery('#input_1_1').val()).replace(/[^0-9\.]+/g, ""));
  var input3 = Number((jQuery('#input_1_2').val()).replace(/[^0-9\.]+/g, ""));
  total_cost = input1 + input2 + input3;
  $('input').trigger('customEvent');
});

$('input').on('customEvent', function() {
  $('#total_cost').text(total_cost);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="small" value="0" step="any" id="input_1_0" name="input_25">
<input type="number" class="small" value="0" step="any" id="input_1_1" name="input_26">
<input type="number" class="small" value="0" step="any" id="input_1_2" name="input_27">
<p><b>Total:</b>  <span id="total_cost">0</span>
</p>

＆＃13;

Answer 3

总计未更新的原因是，在输入更改时，您永远不会调用要更新它的函数。因此，我将此代码移到输入更改事件发生的位置。

jQuery('input').change(function() {
    var input1 = Number((jQuery('#input_1_0').val()).replace(/[^0-9\.]+/g,""));
    var input2 = Number((jQuery('#input_1_1').val()).replace(/[^0-9\.]+/g,""));
    var input3 = Number((jQuery('#input_1_2').val()).replace(/[^0-9\.]+/g,""));      
    total_cost = input1 + input2 + input3;  

    jQuery('#total_cost').text(total_cost);    //<- changed here
})

如何在另一个函数中使用函数变量值？

3 个答案: