javascript - jQuery输入字段求和结果奇怪

我想将这些数字输入相加，并将每个数字与相关跨度中的特定价格相关联
但是用我的功能我得到非常错误的结果...
从本质上讲，总数是进行连接而不是进行求和，但是我尝试了parseFloat和parseInt的每种组合，并始终具有相同的错误
我哪里错了？

这是html：

<table width="300" border="1" style="border-collapse:collapse;">
<tr>
    <td width="40">1</td>

    <td><input class="txt" type="number" name="txt"/><span    class="valore">10</span></td>
</tr>
<tr>
    <td>2</td>

    <td><input class="txt" type="number" name="txt"/><span class="valore">20</span></td>
</tr>
<tr>
    <td>3</td>

    <td><input class="txt" type="number" name="txt"/><span class="valore">30</span></td>
</tr>
<tr id="summation">

    <td align="right">Sum :</td>
    <td align="center"><span id="sum">0</span></td>
</tr>
</table>

这是JQuery：

 $(document).ready(function(){

  $(".txt").each(function() {

        $(this).keyup(function(){
            TotalSum();
        });
    });

});

function TotalSum() {

    var sum = 0;
    var prezzo = 0;
    $(".txt").each(function() {
              prezzo = parseFloat($(".valore").text());
        if(!isNaN(this.value) && this.value.length!=0) {
            sum +=(parseFloat(this.value))*(parseFloat(prezzo));
        }

    });
    $("#sum").html(sum.toFixed(2));
}

非常感谢您的帮助！

最佳答案

这就是你做错了。

您正在使用span选择器获取$('.valore')值。 .valore有3个span元素-因此，无论如何，prezzo = parseFloat($(".valore").text());都会为您提供组合的串联值"102030"。

尝试改用$(this).next().text();或更一般的$(this).siblings(".valore").text());。以下作品。看看这个。

$(document).ready(function(){

  $(".txt").each(function() {

        $(this).keyup(function(){
            TotalSum();
        });
    });

});

function TotalSum() {

    var sum = 0;
    var prezzo = 0;
    $(".txt").each(function() {
        prezzo = parseFloat($(this).siblings(".valore").text());
        //console.log(prezzo);
        if(!isNaN(this.value) && this.value.length!=0) {
            sum +=(parseFloat(this.value))*(parseFloat(prezzo));
        }

    });
    $("#sum").html(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="300" border="1" style="border-collapse:collapse;">
<tr>
    <td width="40">1</td>

    <td><input class="txt" type="number" name="txt"/><span    class="valore">10</span></td>
</tr>
<tr>
    <td>2</td>

    <td><input class="txt" type="number" name="txt"/><span class="valore">20</span></td>
</tr>
<tr>
    <td>3</td>

    <td><input class="txt" type="number" name="txt"/><span class="valore">30</span></td>
</tr>
<tr id="summation">

    <td align="right">Sum :</td>
    <td align="center"><span id="sum">0</span></td>
</tr>
</table>