如何使用JQuery将一个div中的动态小数添加到另一个小数中

Question

我需要能够将输入的小数与一个div中的小数相加。以下是我的代码。目前，它只是将两个数字并排拼接在一起。谢谢。

编辑后：可用代码

<div id="addme">5.01</div>
<input type="text" id="anumber" value="">
<button id="add">Add Number to div</button>

$('#add').click(function() {
var number = parseFloat($('#anumber').val()) || 0;
//alert(number);
$('#addme').html(function(i, val) {
return (parseFloat(val) + number).toFixed(2);
});
});

以下是旧的不可用代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<div id="addme">5.01</div>

<input type="text" id="anumber" value="" />

<button id="add">Add Number to div</button>

<script type="text/javascript">
    $('#add').click(function(){
        var number = $('#anumber').val();
        if(number=='undefined' || number==''){
            var number=0;
        }
        //alert(number);
        $('#addme').html(function(i, val) {return val*1+number });
    });
</script>

- Patriotec

Answer 1

由于您正在处理十进制数，请使用 parseFloat()：

$('#add').click(function() {
    var number = parseFloat($('#anumber').val()) || 0;
    $('#addme').html(function(i, val) {
        return parseFloat(val) + number;
    });
});​

http://jsfiddle.net/mblase75/47t7x/

更新

由于您可能会引入浮点数计算错误（尝试输入“0.6”），因此在返回之前应将其舍入到适当的小数位数（如果涉及美元和美分，则为2；如果涉及其他度量单位，则为7或更多）：

$('#add').click(function() {
    var number = parseFloat($('#anumber').val()) || 0;
    $('#addme').html(function(i, val) {
        return parseFloat((parseFloat(val) + number).toFixed(9)); 
    });
});​

http://jsfiddle.net/mblase75/47t7x/1/

- Blazemonger

---

我必须使用 return (parseFloat(val) + number).toFixed(2); 使其保留2位小数。感谢您的帮助。 - Patriotec

Answer 2

你应该使用 parseInt() 函数来完成这个任务。

$('#addme').html(function(i, val) {return parseInt(val,10)+parseInt(number,10) });

- Yefb

---

如果你使用 parseInt，请始终提供一个基数 -> parseInt(val, 10) - Andreas

不要用 parseInt 处理非整数数字。 - Blazemonger

是的，parseInt只适用于整数。感谢您的注释。 - Yefb

Answer 3

确保将字符串解析为实际的数值。

function(i, val) {return parseFloat(val)*1+parseFloat(number) }

- Snuffleupagus

---

在这里不需要使用*1 - parseFloat总是返回一个数字（或NaN）。 - Blazemonger

@Blazemonger 我只是假设 *1 是另一个值的占位符。 - Snuffleupagus

在我看来，他似乎在使用它将字符串转换为数字 -- 当然，parseFloat 更好。 - Blazemonger

Answer 4

// On the click event of #add
$('#add').on("click", function(){
    // n is equal to #anumber, or 0 if #anumber is blank
    var n = $('#anumber').val() || 0
    // Determine new HTML content for #addme
    $('#addme').html(function(i,v) {
        // Return the sum of n and v floated, to two decimal places
        return ( parseFloat(n) + parseFloat(v) ).toFixed(2);
    });
});​

代码片段：http://jsfiddle.net/G8nka/1/

- Sampson

Answer 5

要将字符串转换为数字，您可以使用在字符串值之前加上+的技巧。它将把字符串值转换为数字。这段代码运行良好：

$('#add').click(function() {
    var number = +$('#anumber').val() || 0;
    $('#addme').html(function(i, val) {
        return (+val + number).toFixed(2);
    });
});​

演示：http://jsfiddle.net/K9g49/

- VisioN

---

当输入非数字字符串时，程序会出现错误。 - Blazemonger

Answer 6

在你的代码中，似乎你想要求和而不是连接字符串。这里是求和的代码，你需要将它放在$(document).ready中，因为你的代码在对象可用之前就已经运行了。

    $(document).ready(function() {
        $('#add').click(function(){
            var number = $('#anumber').val();
            if(number=='undefined' || number=='')
                number=0;
            var target=$('#addme');
            target.html(1*target[0].innerHTML+1*number);
        });
    });

如果你想要拼接字符串，只需移除1*。

- neu-rah