在一个 div 中显示 2 个自定义数据属性项。例如：货币和金额

Question

我有一个基于 HTML、JavaScript 和 PHP 构建的电子商务网站。在产品详细信息页面上，用户可以将产品添加到购物车，因此我显示的是购物车价值的总额。我想始终显示十进制数 (10,2) 格式。目前我的代码工作最少。如果产品价格为 12.00，则单击“添加到购物车”时，计数器 div 仅显示 12。<span><a href="cart.php" class="text-white"><i  class="fa fa-shopping-cart p1"  data-count="10" data-currency="&euro;" id="total"></i></a></span>  .p1[data-count]:after{  position:absolute;  right:1%;  top:1%;  content: attr(data-count);  font-size:10px;  padding:.2em;  line-height:1em;  color: white;  background:#21468b;  text-align:center;  width: 100%;  font-weight:normal;}<script>var theTotal = '0';var ProductSellingPrice = '12.00'$('#insert').click(function(){   theTotal = Number(theTotal) + Number(ProductSellingPrice);    $('#total').attr('data-count', theTotal);});</script>因此，在单击插入时，将添加现有的 TheTotal 和当前产品价格。如果购物车上没有产品，则 p1 不显示任何值，因此如果为空/零，则希望始终显示零。如果产品价格为 12.00，则仅显示 12。如果产品价格为 12.50，则显示 12.50。我希望它始终显示十进制以及使用数据属性的货币符号。显示小数点问题由@Simone 解决，我无法找到使用数据属性在值之前显示货币的答案。

Answer 1

如果你想要 12.00 而不是 12 你必须使用Number.prototype.toFixed()

因此，您必须将所有单个产品的总和（数量 * 价格是单个总和）转换为浮点数，当您计算总和时，取数字并执行以下操作：

Number.parseFloat(total).toFixed(2); // two decimal

例子：

var quantity = 10;

var price = 11;

var tot = parseFloat(quantity * price).toFixed(2);

console.log(tot); // "110.00"