为什么十进制值没有显示？

问题描述

因此，我准备好了我的jQuery脚本，但是我正在努力解决1个问题，如果值为：$ 10，那么一切正常，但是当值为： $ 24,99 那么它只会显示 24 而不是 24,99 。

我该如何解决这个问题？这是我的来源：

 < table width =652border =0cellpadding = 5cellspacing =0> 
< thead> 
< tr> 
< th align =left> 
< strong>产品< / strong> 
< / th> 
< th align =left> 
< strong>产品价格< / strong> 
< / th> 
< th align =left> 
< strong>您要多少钱？< / strong> 
< / th> 
< th align =left> 
< strong>总价< / strong> 
< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td width =210>水果：< / td> 
< td width =216> $ 10< / td> 
< td width =204> 
< input type =text/> 
< / td> 
< td width =204>< / td> 
< / tr> 
< tr> 
< td>饮料：< / td> 
< td> $ 22,95< / td> 
< td> 
< input type =text/> 
< / td> 
< td>< / td> 
< / tr> 
< tr> 
< td>卡片：< / td> 
< td> $ 5< / td> 
< td> 
< input type =text/> 
< / td> 
< td>< / td> 
< / tr> 
< / tbody> 
< tfoot> 
< tr> 
< td>< / td> 
< td>< / td> 
< td>全部总价：< / td> 
< td id =total>< / td> 
< / tr> 
< / tfoot> 
< / table> 
  

$（input ）.on（keyup，function（）{
var $ input = $（this）;
var howMany = parseInt（$ input.val（））;
var unitAmount = parseInt （$ input.parent（）。prev（）。text（）。replace（$，））;
var total = howMany？howMany * unitAmount：0;
$ input.parent （）.next（）。text（€+ total）;

var total = 0;
$（tbody tr td：last-child）。each（function ）{
total + = parseInt（$（this）.text（）。replace（€，）|| 0）;
}）;
$（＃total ）.html（€+ total）;
}）;


解决方案

您必须将小数点分隔符更改为 parseInt 至 parseFloat

  var unitAmount = parseFloat（$ input.parent（）。prev（）。text（）。replace（$，）.replace（，，。））
  

在算术运算之后，您必须将数字转换回字符串并用替换：

$ $ p $ $ input.parent（）。next（）。text（€+（ +总）.replace（ ）。）;


如果价格合理：



  var total = 0; 
 $（tbody tr td：last-child）。each（function（）{
 total + = parseFloat（$（this）.text（）。replace（€，） .replace（，，。）|| 0）; 
}）; 
 $（＃total）。html（（+ total）.replace（。，，））; 
  

完整的演示是


So i have my jQuery script ready, but i am struggling with 1 problem , if a value is: $ 10 then everything is fine, but when a value is: $24,99 then it only will show 24 instead of 24,99.

How can i fix this? this is my source:

http://jsfiddle.net/0L2n8wdt/34/

<table width="652" border="0" cellpadding="5" cellspacing="0">
    <thead>
        <tr>
            <th align="left">
                <strong>Product</strong>
            </th>
            <th align="left">
                <strong>Product Price</strong>
            </th>
            <th align="left">
                <strong>How much you want?</strong>
            </th>
            <th align="left">
                <strong>Total Price</strong>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td width="210">Fruit:</td>
            <td width="216">$ 10</td>
            <td width="204">
                <input type="text" />
            </td>
            <td width="204"></td>
        </tr>
        <tr>
            <td>Drinks:</td>
            <td>$ 22,95</td>
            <td>
                <input type="text" />
            </td>
            <td></td>
        </tr>
        <tr>
            <td>Cards:</td>
            <td>$ 5</td>
            <td>
                <input  type="text"/>
            </td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>Total price of all:</td>
            <td id="total"></td>
        </tr>
    </tfoot>
</table>

$("input").on("keyup", function () {
    var $input = $(this);
    var howMany = parseInt($input.val());
    var unitAmount = parseInt($input.parent().prev().text().replace("$", ""));
    var total = howMany ? howMany * unitAmount : 0;
    $input.parent().next().text("€ " + total);

    var total = 0;
    $("tbody tr td:last-child").each(function () {
        total += parseInt($(this).text().replace("€", "") || 0);
    });
    $("#total").html("€ " + total);
});

解决方案

you have to change the decimal separator to dot and parseInt to parseFloat

var unitAmount = parseFloat($input.parent().prev().text().replace("$", "").replace(",","."))

And after arithmetic operations you have to convert you number back to a string and replace the dot with , :

 $input.parent().next().text("€ " + (""+total).replace(".",","));

For tatal price:

var total = 0;
$("tbody tr td:last-child").each(function() {
    total += parseFloat($(this).text().replace("€","").replace(",",".") || 0);
});
$("#total").html( (""+total).replace(".",","));

The full demo is here

这篇关于为什么十进制值没有显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！