javascript - 使用 firebase 产品数据填充 HTML 并获取总量

Question

我通过执行以下操作填充自定义 HTML 以使用 firebase 数据创建“购物车”:

  snapshot.forEach((childSnapshot) => {

      var itemName = childSnapshot.key;
      var price = childSnapshot.val().price;
      var qty = childSnapshot.val().qty;
      var html = '';
      html += '<a class="list-group-item">';

      html +=  itemName + ' ($' + price + ")" ;

      html += '<span class="label label-default label-pill pull-xs-right" id="' + itemName + '">';
      html += '<input type="text" class="width-input form-control" value="' + qty + '">' ;
      html += '</span>';
      html += '</a>';

      $("#list-items").append(html);

我得到了预期的项目列表:

每个项目的最终html是:

<a class="list-group-item">
   Bananas ($7.50)
   <span class="label label-default label-pill pull-xs-right" id="Bananas">
       <input type="text" class="width-input form-control" value="8">
   </span>
</a>

现在，我不知道如何检索每件商品的价格和数量来对成本进行最终计算，如果用户更改文本输入的值，我如何才能获得新的数量？

Answer 1

由于您已经在遍历结果，因此您可以使用变量并在每次迭代时添加价格。

    totalPrice += price;

或

    totalPrice += (price * qty);

如果他们更改数量，请在输入元素上使用 onChange() 监听器并重新运行计算。