Question

好的，我印象深刻的是你们花时间来回答这个问题，非常感谢你们，我没想到。希望很好地跟随你。

为了解释我的问题，我使用了你所有的小提琴工具。这是我的代码：

enter code here http://jsfiddle.net/5xzSy/1/

- 我需要的是总结在跨度中计算的值：budgetI + actualI

Answer 1

将代码修改为：使用.text（）填充Span并为输入分配一些值。（因为您使用过jQuery）

HTML代码

<pre>
<input id=primaryB type="text" value="100"></input><input id=primaryA type="text" value="100"></input><span id=primary></span><br />
<input id=spouseB type="text" value="100"></input><input id=spouseA type="text" value="100"></input><span id=spouse></span><br />

Budget: <span id=budget></span> <br />
Actual: <span id=actual></span><br />

</pre>

Javascript / jQuery Code

var primaryBValue = parseFloat($('#primaryB').val()); 
var primaryAValue = parseFloat($('#primaryA').val()); 
$('#primary').html(primaryBValue + primaryAValue);  

var spouseBValue = parseFloat($('#spouseB').val()); 
var spouseAValue = parseFloat($('#spouseA').val()); 
$('#spouse').html(spouseBValue + spouseAValue); 

$('#budget').text(primaryBValue + spouseBValue);
$('#actual').text(primaryAValue + spouseAValue);

Answer 2

在插入

之后，听取change-event以求和数字

http://jsfiddle.net/55c5uqhc/2/

$('#primaryB,#primaryA,#spouseB,#spouseA').change(calc);

function calc() {       
                var primaryBValue = parseFloat($('#primaryB').val()); 
                var primaryAValue = parseFloat($('#primaryA').val()); 
                $('#primary').html(primaryBValue + primaryAValue);  

                var spouseBValue = parseFloat($('#spouseB').val()); 
                var spouseAValue = parseFloat($('#spouseA').val()); 
                $('#spouse').html(spouseBValue + spouseAValue); 

                $('#budget').html(primaryBValue + spouseBValue);
                $('#actual').html(primaryAValue + spouseAValue) ;
}

Answer 3

您需要创建一个用于填充<span>的触发器，同时使用text()代替哦html() 这是一个例子（可能是一个糟糕的例子，但它是开始的好地方）：

功能：

$('input').keyup(function(e){
    var spouseBValue = parseFloat($('#spouseB').val()); 
    var spouseAValue = parseFloat($('#spouseA').val()); 
    var primaryBValue = parseFloat($('#primaryB').val()); 
    var primaryAValue = parseFloat($('#primaryA').val());
    $('#spouse').text(spouseBValue - (-spouseAValue)); 
    $('#primary').text(primaryBValue - (-primaryAValue));
    $('#budget').text(primaryBValue - (-spouseBValue));
    $('#actual').text(primaryAValue - (-spouseAValue));
});

fiddle

获取span元素的值并输出它

3 个答案: