JQuery Eingabefelder seltsame Summenergebnis

Question

Ich möchte diese Zahl eingegeben, von denen jeder summieren sich mit einem besonderen Preis in einem verwandten Spanne zugeordnet
Aber mit meiner Funktion bekomme ich sehr falschen Ergebnissen ...
Wesentlichen die gesamte do eine Verkettung anstelle einer Summe, aber ich habe jede Art von Kombination von parseFloat und parseInt mit immer dem gleichen Fehler versucht
wo bin ich falsch?

hier ist 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> 

Hier die JQuery ist:

viel für jede Hilfe

$(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)); 
} 

Dank!

Answer 1

Sie sollten den Elementen anstelle der Klasse valore eindeutige IDs zuweisen. Ansonsten ist prezzo immer 10, da es das erste Element ist, das jQuery mit der Klasse valore findet. Alternativ können Sie die jQuery-Methoden verwenden, die von Chintan vorgeschlagene Geschwisterknoten dynamisch auswählen.

Zweitens könnte es in der Zukunft nützlich sein, den Unterschied zwischen der Verwendung von $(".valore").text() und $(".valore").html() zu kennen, wenn Sie jemals den Inhalt des Elements valore ändern würden. Die erste Methode ruft nur den Text innerhalb des Elements ab und ignoriert alle HTML-Tags, während die zweite Methode ebenfalls die HTML-Tags zurückgibt.

Answer 2

Dies ist, was Sie falsch machen.

Sie erhalten die span Werte mit $('.valore') Selektor. Es gibt 3 Span Elemente mit .valore - so prezzo = parseFloat($(".valore").text()); wird Ihnen den kombinierten verketteten Wert "102030" egal was geben.

Verwenden Sie stattdessen $(this).next().text(); oder allgemeiner $(this).siblings(".valore").text());. Folgendes funktioniert. Hör zu.

$(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>