在一个 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"